Create Waves With Pure CSS

#css #html

Hello everyone!

Today we are going to learn how to create waves with pure CSS like in ps4 interface, Here is the final result:

Let's get started

HTML

<div class='box'>
          <div class='wave -one'></div>
          <div class='wave -two'></div>
          <div class='wave -three'></div>
      </div>

We need a "div" for each wave you want to set up, in this example we are going to use 3 of them with the class "wave" and we are going to wrap them in another div with class "box".

CSS

.box {
  position: fixed;
  top: 0;
  transform: rotate(80deg); 
  left: 0;
}

.wave {
  position: absolute;
  opacity: .4;
  width: 1500px;
  height: 1300px;
  margin-left: -150px;
  margin-top: -250px;
  border-radius: 43%;
}

First we need to defined the "box" container as fixed position in this case, to achieve the same effect as the ps4 interface, the next 3 css rules are only for positioning the "box" element wherever you want. You can play around with those values.

After you set up the "box" element it is time to create the waves. If you look at the rules in the "wave" class most of the rules are for the positioning of the waves, but the key rule for this animation is the border-radius, here is the reason why:

We are creating rectangles with a moderate value of border-radius, if we zoom into a corner of this animation, and we position this waves in the right place we are going to achieve the wave effect.

Now we need to create the animation in order to rotate the waves. Super simple!

@keyframes rotate {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}

Once we have our animation in the css, we need to set the animation into our waves with different timing and background colors, you can also play around with the opacity :D

.wave.-one {
  animation: rotate 7000ms infinite linear;
  opacity: .1;
  background: #0af;
}

.wave.-two {
  animation: rotate 3000ms infinite linear;
  opacity: .1;
  background: black;
}

.wave.-three {
  animation: rotate 7500ms infinite linear;
  background-color: #77daff;
}