纯css实现跳动频率动画效果-html代码-BFW代码库

纯css实现跳动频率动画效果

代码语言：html

所属分类：动画

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

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

<title>EQ-like thingie</title>
<style>
      body {
  display: flex;
  margin: 0;
  height: 100vh;
  background: #222;
}

section {
  flex: 1;
}

#s0 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#s0 .bar {
  margin: 0 0.5vmin calc(50vh - 4em) 0.5vmin;
  padding: 0 .25vmin;
}

#s1 {
  position: relative;
}
#s1 .bar {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4em;
  transform-origin: 50% 0;
  transform: rotate(calc(var(--i)*360deg/var(--n))) translatey(1.5em);
}

.bar {
  width: 0.5em;
  height: 8em;
  border-radius: 4em;
  animation: a 3.75s ease-in-out calc(var(--i)*-3.75s/var(--n)) infinite;
}

@keyframes a {
  0% {
    height: 4.0206850626em;
  }
  4% {
    height: 3.596101718em;
  }
  8% {
    height: 0.857929314em;
  }
  12% {
    height: 4.0672290626em;
  }
  16% {
    height: 7.1300317462em;
  }
  20% {
    height: 6.7712601131em;
  }
  24% {
    height: 5.8186279549em;
  }
  28% {
    height: 4.6340881403em;
  }
  32% {
    height: 1.2145889262em;
  }
  36% {
    height: 1.8827033857em;
  }
  40% {
    height: 7.7150964495em;
  }
  44% {
    height: 5.1913795266em;
  }
  48% {
    height: 4.9755007941em;
  }
  52% {
    height: 2.414592694em;
  }
  56% {
    height: 0.3323190341em;
  }
  60% {
    height: 2.452340516em;
  }
  64% {
    height: 6.5306260206em;
  }
  68% {
    height: 0.9196385193em;
  }
  72% {
    height: 4.9054036871em;
  }
  76% {
    height: 1.6848117887em;
  }
  80% {
    height: 6.3186721891em;
  }
  84% {
    height: 4.844396213em;
  }
  88% {
    height: 5.0980652932em;
  }
  92% {
    height: 6.0576122635em;
  }
  96% {
    height: 1.6647930648em;
  }
}

    </style>

</head>
<body translate="no">
<section id="s0" style="--n: 12;">
<div class="bar" style="--i: 0; background: #8cd0e5;"></div>
<div class="bar" style="--i: 1; background: #376888;"></div>
<div class="bar" style="--i: 2; background: #826b88;"></div>
<div class="bar".........完整代码请登录后点击上方下载按钮下载查看