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

纯css实现管状波纹动画效果

代码语言：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:.........完整代码请登录后点击上方下载按钮下载查看