loading...

Create Waves With Pure CSS

pixmy profile image Arturo Cabrera ・2 min read

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;
}

And we are done! now you should be able to see the waves!!! Similar to this codepen I made a while back (works correctly on desktop only)

This was my first post! Hope you like it :D

Posted on by:

pixmy profile

Arturo Cabrera

@pixmy

I'm a front-end developer :) I love to create interactive elements and pure CSS animations, I really enjoy web development in general.

Discussion

markdown guide
 

Oww thats really cool, thanks for sharing

 

That’s really cool! Thanks !

 

beautifull animation, thank you pro. Hope you make more articles about animation with html, css.

 

Woah! That recreation of the PS4 UI is amazing! 😲

 
 

Very cool! I'll have a go myself tomorrow!

 

I love this kind of creativity πŸ€“