纯css实现管状波纹动画效果-html代码-BFW代码库

代码语言：html

代码描述：纯css实现管状波纹动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  font-family: 'Dosis', sans-serif;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.title {
  margin-bottom: 20px;
  font-size: 3rem;
  color: #38ddff;
  -webkit-transform: skewX(-8deg);
          transform: skewX(-8deg);
}

.wavy {
  display: -webkit-box;
  display: flex;
}

.waveline {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  width: 12px;
  height: 300px;
  margin: 0 5px;
  -webkit-transform: skewX(-8deg);
          transform: skewX(-8deg);
}
.waveline:nth-child(1) .bar.-middle {
  -webkit-animation-delay: -60ms;
          animation-delay: -60ms;
}
.waveline:nth-child(1) .bar.-bottom {
  -webkit-animation-delay: -860ms;
          animation-delay: -860ms;
}
.waveline:nth-child(2) .bar.-middle {
  -webkit-animation-delay: -120ms;
          animation-delay: -120ms;
}
.waveline:nth-child(2) .bar.-bottom {
  -webkit-animation-delay: -920ms;
          animation-delay: -920ms;
}
.waveline:nth-child(3) .bar.-middle {
  -webkit-animation-delay: -180ms;
          animation-delay: -180ms;
}
.waveline:nth-child(3) .bar.-bottom {
  -webkit-animation-delay: -980ms;
          animation-delay: -980ms;
}
.waveline:nth-child(4) .bar.-middle {
  -webkit-animation-delay: -240ms;
          animation-delay: -240ms;
}
.waveline:nth-child(4) .bar.-bottom {
  -webkit-animation-delay: -1040ms;
          animation-delay: -1040ms;
}
.waveline:nth-child(5) .bar.-middle {
  -webkit-animation-delay: -300ms;
          animation-delay: -300ms;
}
.waveline:nth-child(5) .bar.-bottom {
  -webkit-animation-delay: -1100ms;
          animation-delay: -1100ms;
}
.waveline:nth-child(6) .bar.-middle {
  -webkit-animation-delay: -360ms;
          animation-delay: -360ms;
}
.waveline:nth-child(6) .bar.-bottom {
  -webkit-animation-delay: -1160ms;
          animation-delay: -1160ms;
}
.waveline:nth-child(7) .bar.-middle {
  -webkit-animation-delay: -420ms;
          animation-delay: -420ms;
}
.waveline:nth-child(7) .bar.-bottom {
  -webkit-animation-delay: -1220ms;
          animation-delay: -1220ms;
}
.waveline:nth-child(8) .bar.-middle {
  -webkit-animation-delay: -480ms;
          animation-delay: -480ms;
}
.waveline:nth-child(8) .bar.-bottom {
  -webkit-animation-delay: -1280ms;
          animation-delay: -1280ms;
}
.waveline:nth-child(9) .bar.-middle {
  -webkit-animation-delay: -540ms;
          animation-delay: -540ms;
}
.waveline:nth-child(9) .bar.-bottom {
  -webkit-animation-delay: -1340ms;
          animation-delay: -1340ms;
}
.waveline:nth-child(10) .bar.-middle {
  -webkit-animation-delay: -600ms;
          animation-delay: -600ms;
}
.waveline:nth-child(10) .bar.-bottom {
  -webkit-animation-delay: -1400ms;
          animation-delay: -1400ms;
}
.waveline:nth-child(11) .bar.-middle {
  -webkit-animation-delay: -660ms;
          animation-delay: -660ms;
}
.waveline:nth-child(11) .bar.-bottom {
  -webkit-animation-delay: -1460ms;
          animation-delay: -1460ms;
}
.waveline:nth-child(12) .bar.-middle {
  -webkit-animation-delay: -720ms;
          animation-delay: -720ms;
}
.waveline:nth-child(12) .bar.-bottom {
  -webkit-animation-delay: -1520ms;
          animation-delay: -1520ms;
}
.waveline:nth-child(13) .bar.-middle {
  -webkit-animation-delay: -780ms;
          animation-delay: -780ms;
}
.waveline:nth-child(13) .bar.-bottom {
  -webkit-animation-delay: -1580ms;
          animation-delay: -1580ms;
}
.waveline:nth-child(14) .bar.-middle {
  -webkit-animation-delay: -840ms;
          animation-delay: -840ms;
}
.waveline:nth-child(14) .bar.-bottom {
  -webkit-animation-delay: -1640ms;
          animation-delay: -1640ms;
}
.waveline:nth-child(15) .bar.-middle {
  -webkit-animation-delay: -900ms;
          animation-delay: -900ms;
}
.waveline:nth-child(15) .bar.-bottom {
  -webkit-animation-delay: -1700ms;
          animation-delay: -1700ms;
}
.waveline:nth-child(16) .bar.-middle {
  -webkit-animation-delay: -960ms;
          animation-delay: -960ms;
}
.waveline:nth-child(16) .bar.-bottom {
  -webkit-animation-delay: -1760ms;
          animation-delay: -1760ms;
}
.waveline:nth-child(17) .bar.-middle {
  -webkit-animation-delay: -1020ms;
          animation-delay: -1020ms;
}
.waveline:nth-child(17) .bar.-bottom {
  -webkit-animation-delay: -1820ms;
          animation-delay: -1820ms;
}
.waveline:nth-child(18) .bar.-middle {
  -webkit-animation-delay: -1080ms;
          animation-delay: -1080ms;
}
.waveline:nth-child(18) .bar.-bottom {
  -webkit-animation-delay: -1880ms;
          animation-delay: -1880ms;
}
.waveline:nth-child(19) .bar.-middle {
  -webkit-animation-delay: -1140ms;
          animation-delay: -1140ms;
}
.waveline:nth-child(19) .bar.-bottom {
  -webkit-animation-delay: -1940ms;
          animation-delay: -1940ms;
}
.waveline:nth-child(20) .bar.-middle {
  -webkit-animation-delay: -1200ms;
          animation-delay: -1200ms;
}
.waveline:nth-child(20) .bar.-bottom {
  -webkit-animation-delay: -2000ms;
          animation-delay: -2000ms;
}
.waveline:nth-child(21) .bar.-middle {
  -webkit-animation-delay: -1260ms;
          animation-delay: -1260ms;
}
.waveline:nth-child(21) .bar.-bottom {
  -webkit-animation-delay: -2060ms;
          animation-delay: -2060ms;
}
.waveline:nth-child(22) .bar.-middle {
  -webkit-animation-delay: -1320ms;
          animation-delay: -1320ms;
}
.waveline:nth-child(22) .bar.-bottom {
  -webkit-animation-delay: -2120ms;
          animation-delay: -2120ms;
}
.waveline:nth-child(23) .bar.-middle {
  -webkit-animation-delay: -1380ms;
          animation-delay: -1380ms;
}
.waveline:nth-child(23) .bar.-bottom {
  -webkit-animation-delay: -2180ms;
          animation-delay: -2180ms;
}
.waveline:nth-child(24) .bar.-middle {
  -webkit-animation-delay: -1440ms;
          animation-delay: -1440ms;
}
.waveline:nth-child(24) .bar.-bottom {
  -webkit-animation-delay: -2240ms;
          animation-delay: -2240ms;
}
.waveline:nth-child(25) .bar.-middle {
  -webkit-animation-delay: -1500ms;
          animation-delay: -1500ms;
}
.waveline:nth-child(25) .bar.-bottom {
  -webkit-animation-delay: -2300ms;
          animation-delay: -2300ms;
}
.waveline:nth-child(26) .bar.-middle {
  -webkit-animation-delay: -1560ms;
          animation-delay: -1560ms;
}
.waveline:nth-child(26) .bar.-bottom {
  -webkit-animation-delay: -2360ms;
          animation-delay: -2360ms;
}
.waveline:nth-child(27) .bar.-middle {
  -webkit-animation-delay: -1620ms;
          animation-delay: -1620ms;
}
.waveline:nth-child(27) .bar.-bottom {
  -webkit-animation-delay: -2420ms;
          animation-delay: -2420ms;
}
.waveline:nth-child(28) .bar.-middle {
  -webkit-animation-delay: -1680ms;
          animation-delay: -1680ms;
}
.waveline:nth-child(28) .bar.-bottom {
  -webkit-animation-delay: -2480ms;
          animation-delay: -2480ms;
}
.waveline:nth-child(29) .bar.-middle {
  -webkit-animation-delay: -1740ms;
          animation-delay: -1740ms;
}
.waveline:nth-child(29) .bar.-bottom {
  -webkit-animation-dela.........完整代码请登录后点击上方下载按钮下载查看