create wavy background animation using pure CSS3

In this article, we will learn how to create a wave animation for background with the help of pure CSS, I’ve learned this from the Udemy course, now let’s start with writing some HTML markup,

Note: if you are here for the code then it’s provided at the end of the article, live Codepen preview is shown below

HTML :

create one div named floating-bg to which we’ll add the animation, now let’s edit this using CSS,

CSS :

First, reset the CSS, now we will have 2 different backgrounds which we will create using before selectors,
here we just have to play with the size of the background, the position of the background, and the radius of the background,
to rotate it,

we are going to create an animation of rotating both the backgrounds at a constant speed for an infinite time,
after applying the animation you’ll see that your scroll bars are moving it’s because of the size and the radius that we gave to the background which makes the animation good and easy but it hindders the size of our body, so that’s why we will apply overflow property to the body, that’s it we will have our output,

animation :

wavy background animation

now let me explain to you what each line of code is doing firstly we are going to provide the width and height of the bg with some color and its position will be absolute so that we can move it in the direction that we want, to hide almost the 80% bg we are going to give the top property a much bigger value in negative by which we will only be able to see some of the parts and that’s what we want,

now to put it in the center we are going to use left in property with the calc which subtracts the half width of our background from the 50% vw which puts our bg in the center, here we have gave some border radius to get some animation, and add an animation with the help of animation property for the infinite time, apply the same thing to the before selectors but with the smaller size and smaller radius and top and left 0 with the smoother and lite color,

here we will be using keyframes to animate in which the rotation will start from 0deg and end at 360deg for the infinite time.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>creative design</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        overflow: hidden;
      }

      .floating-bg {
        width: 150vw;
        height: 150vw;
        background-color: rgba(50, 231, 255, 0.8);
        position: absolute;
        top: -125vw;
        left: calc(50% - 75vw);
        border-radius: 45%;
        animation: rotate 30s infinite;
      }

      .floating-bg::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(50, 231, 255, 0.1);
        top: 0;
        left: 0;
        border-radius: 40%;
        animation: rotate 30s infinite;
      }

      @keyframes rotate {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="floating-bg"></div>
  </body>
</html>

Leave a Comment

Your email address will not be published.

Scroll to Top