div+css实现波纹波动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现波纹波动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
  
<style>
body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: "Anton", sans-serif;
  justify-content: center;
  align-items: center;
  align-items: flex-end;
}

.wave {
  display: flex;
  filter: drop-shadow(120px 0 0px rgba(149, 191, 218, 0.5));
  margin-bottom: 10px;
}

.window {
  position: relative;
  width: 40px;
  height: 200px;
  margin: 10px;
  border-radius: 3px;
  overflow: hidden;
}
.window::before {
  content: "wave";
  position: absolute;
  top: 50%;
  left: -100%;
  width: 300%;
  height: 100%;
  background: #95bfda;
  -webkit-animation: upDown 2000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate, wave 2000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: upDown 2000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate, wave 2000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
  color: #fff;
  font-size: 20px;
}
.window:nth-child(1)::before {
  -webkit-animation-delay: -500ms, -3500ms;
          animation-delay: -500ms, -3500ms;
}
.window:nth-child(2)::before {
  -webkit-animation-delay: -1000ms, -4000ms;
          animation-delay: -1000ms, -4000ms;
}
.window:nth-child(3)::before {
  -webkit-animation-delay: -1500ms, -4500ms;
          animation-delay: -1500ms, -4500ms;
}
.window:nth-child(4)::before {
  -webkit-animation-delay: -2000ms, -5000ms;
          animation-delay: -2000ms, -5000ms;
}
.window:nth-child(5)::before {
  -webkit-animation-delay: -2500ms, -5500ms;
          animation-delay: -2500ms, -5500ms;
}
.window:nth-child(6)::before {
  -webkit-animation-delay: -3000ms, -6000ms;
          animation-delay: -3000ms, -6000ms;
}
.window:nth-child(7)::before {
  -webkit-animation-delay: -3500ms, -6500ms;
          animation-delay: -3500ms, -6500ms;
}
.window:nth-child(8)::before {
  -webkit-animation-delay: -4000ms, -7000ms;
          animation-delay: -4000ms, -7000ms;
}
.window:nth-child(9)::before {
  -webkit-animation-delay: -4500ms, -7500ms;
          animation-delay: -4500ms, -7500ms;
}
.window:nth-child(10)::before {
  -webkit-animation-delay: -5000ms, -8000ms;
          animation-delay: -5000ms, -8000ms;
}
.window:nth-child(11)::before {
  -webkit-animation-delay: -5500ms, -8500ms;
          animation-delay: -5500ms, -8500ms;
}
.window:nth-child(12)::before {
  -webkit-animation-delay: -6000ms, -9000ms;
          animation-delay: -6000ms, -9000ms;
}
.window:nth-child(13)::before {
  -webkit-animation-delay: -6500ms, -9500ms;
          animation-delay: -6500ms, -9500ms;
}
.window:nth-child(14)::before {
  -webkit-animation-delay: -7000ms, -10000ms;
          animation-delay: -7000ms, -10000ms;
}
.window:nth-child(15)::before {
  -webkit-animation-delay: -7500ms, -10500ms;
          animation-delay: -7500ms, -10500ms;
}
.window:nth-child(16)::before {
  -webkit-animation-delay: -8000ms, -11000ms;
          animation-delay: -8000ms, -11000ms;
}
.window:nth-child(17)::before {
  -webkit-animation-delay: -8500ms, -11500ms;
          animation-delay: -8500ms, -11500ms;
}
.window:nth-child(18)::before {
  -webkit-animation-delay: -9000ms, -12000ms;
          animation-delay: -9000ms, -12000ms;
}
.window:nth-child(19)::before {
  -webkit-animation-delay: -9500ms, -12500ms;
          animation-delay: -9500ms, -12500ms;
}
.window:nth-child(20)::before {
  -webkit-animation-delay: -10000ms, -13000ms;
          animation-delay: -10000ms, -13000ms;
}
.window:nth-child(21)::before {
  -webkit-animation-delay: -10500ms, -13500ms;
          animation-delay: -10500ms, -13500ms;
}
.window:nth-child(22)::before {
  -webkit-animation-delay: -11000ms, -14000ms;
          animation-delay: -11000ms, -14000ms;
}
.window:nth-child(23)::before {
  -webkit-animation-delay: -11500ms, -14500ms;
          animation-delay: -11500ms, -14500ms;
}
.window:nth-child(24)::before {
  -webkit-animation-delay: -12000ms, -15000ms;
          animation-delay: -12000ms, -15000ms;
}
.window:nth-child(25)::before {
  -webkit-animation-delay: -12500ms, -15500ms;
          animation-delay: -12500ms, -15500ms;
}
.window:nth-child(26)::before {
  -webkit-animation-delay: -13000ms, -16000ms;
          animation-delay: -13000ms, -16000ms;
}
.window:nth-child(27)::before {
  -webkit-animation-delay: -13500ms, -16500ms;
          animation-delay: -13500ms, -16500ms;
}
.window:nth-child(28)::before {
  -webkit-animation-delay: -14000ms, -17000ms;
          animation-delay: -14000ms, -17000ms;
}
.window:nth-child(29)::before {
  -webkit-animation-delay: -14500ms, -17500ms;
          animation-delay: -14500ms, -17500ms;
}
.window:nth-child(30)::before {
  -webkit-animation-delay: -15000ms, -18000ms;
          animation-delay: -15000ms, -18000ms;
}
.window:nth-child(31)::before {
  -webkit-animation-delay: -15500ms, -18500ms;
          animation-delay: -15500ms, -18500ms;
}
.window:nth-child(32)::before {
  -webkit-animation-delay: -16000ms, -19000ms;
          animation-delay: -16000ms, -19000ms;
}
.window:nth-child(33)::before {
  -webkit-animation-delay: -16500ms,.........完整代码请登录后点击上方下载按钮下载查看