DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Arturo Cabrera
Arturo Cabrera

Posted on

Create Waves With Pure CSS

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>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (9)

Collapse
 
felipperegazio profile image
Felippe Regazio

Oww thats really cool, thanks for sharing

Collapse
 
alexantra profile image
Alex Antra

That’s really cool! Thanks !

Collapse
 
nguyenluonghuy6 profile image
Nguyen Luong Huynh • Edited on

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

Collapse
 
jammypiece profile image
Lorna

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

Collapse
 
badrecordlength profile image
Henry πŸ‘¨β€πŸ’»

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

Collapse
 
pixmy profile image
Arturo Cabrera

Thank you so much!!

Collapse
 
devmohdx profile image
DevMohdx

Wooow, that is really cool

Collapse
 
steffenpedersen profile image
Steffen Pedersen

I love this kind of creativity πŸ€“

Collapse
 
co0kie profile image
co0kie

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!