Acid Waves (CSS3 animation)

In this example below you will see how to do a Acid Waves (CSS3 animation) with some HTML / CSS and Javascript

Simple CSS wave animation based on a repeating wave pattern.

Thumbnail
This awesome code was written by alexanderisora, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alexanderisora ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Acid Waves (CSS3 animation)</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="background_box">
  <div class="background background--top">
    <div class="wave wave--top"></div>
  </div>
  <div class="background background--mid">
    <div class="wave wave--mid"></div>
  </div>
  <div class="background background--bot">
    <div class="wave wave--bot"></div>
  </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/alexanderisora/acid-waves-css3-animation-OWbdyW */
.background_box {
  position: relative;
  height: 100vh;
}

.background {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
  background-image: linear-gradient(-134deg, #2110BA 0%, #FF05D8 100%);
}
.background--top {
  z-index: 15;
  opacity: 0.5;
}
.background--mid {
  z-index: 10;
  opacity: 0.75;
}
.background--bot {
  z-index: 5;
}

.wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  will-change: transform;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.wave--top {
  -webkit-animation: move_wave 5s linear infinite;
          animation: move_wave 5s linear infinite;
  background-image: url("https://isora.me/public/codepen/wave-top.png");
  background-size: 50% 100px;
}
.wave--mid {
  -webkit-animation: move_wave 10s linear infinite;
          animation: move_wave 10s linear infinite;
  background-image: url("https://isora.me/public/codepen/wave-mid.png");
  background-size: 50% 120px;
}
.wave--bot {
  -webkit-animation: move_wave 15s linear infinite;
          animation: move_wave 15s linear infinite;
  background-image: url("https://isora.me/public/codepen/wave-bot.png");
  background-size: 50% 100px;
}

@-webkit-keyframes move_wave {
  0% {
    -webkit-transform: translateX(0) scaleY(1);
            transform: translateX(0) scaleY(1);
  }
  50% {
    -webkit-transform: translateX(-25%) scaleY(0.55);
            transform: translateX(-25%) scaleY(0.55);
  }
  100% {
    -webkit-transform: translateX(-50%) scaleY(1);
            transform: translateX(-50%) scaleY(1);
  }
}

@keyframes move_wave {
  0% {
    -webkit-transform: translateX(0) scaleY(1);
            transform: translateX(0) scaleY(1);
  }
  50% {
    -webkit-transform: translateX(-25%) scaleY(0.55);
            transform: translateX(-25%) scaleY(0.55);
  }
  100% {
    -webkit-transform: translateX(-50%) scaleY(1);
            transform: translateX(-50%) scaleY(1);
  }
}


/*Downloaded from https://www.codeseek.co/alexanderisora/acid-waves-css3-animation-OWbdyW */
// none

Comments