css3 写一个不用颜色的线条不规则运动的音频动画

好的，我可以为您提供一个简单的示例代码，如下：

HTML 代码：

<div class="audio-visualizer">
  <div class="line-1"></div>
  <div class="line-2"></div>
  <div class="line-3"></div>
  <div class="line-4"></div>
  <div class="line-5"></div>
  <div class="line-6"></div>
</div>

CSS 代码：

.audio-visualizer {
  position: relative;
  width: 300px;
  height: 100px;
}

.audio-visualizer div {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 0;
  opacity: 0.7;
  animation: audio-visualizer-line 2s linear infinite;
}

.line-1 {
  left: 10px;
  animation-delay: 0.2s;
}

.line-2 {
  left: 30px;
  animation-delay: 0.4s;
}

.line-3 {
  left: 60px;
  animation-delay: 0.6s;
}

.line-4 {
  left: 90px;
  animation-delay: 0.8s;
}

.line-5 {
  left: 120px;
  animation-delay: 1s;
}

.line-6 {
  left: 140px;
  animation-delay: 1.2s;
}

@keyframes audio-visualizer-line {
  0% {
    height: 0;
  }
  20% {
    height: 30px;
  }
  40% {
    height: 20px;
  }
  60% {
    height: 50px;
  }
  80% {
    height: 10px;
  }
  100% {
    height: 30px;
  }
}

这段代码会生成一个宽为 300px，高为 100px 的 div 容器，其中包含了 6 条不同位置的垂直线条，每条线条都会不规则地随着音频节奏进行上下运动。这些线条的颜色是透明的，因此您可以在背景色不同时，实现不同的视觉效果。