【css3】音频波纹加载效果

CSS3可以用来制作音频波纹的加载效果，以下是一个简单的实现示例：

HTML:

<div class="waveform">
  <div class="waveform-bar"></div>
  <div class="waveform-bar"></div>
  <div class="waveform-bar"></div>
  <div class="waveform-bar"></div>
  <div class="waveform-bar"></div>
</div>

CSS:

.waveform {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ddd;
  border-radius: 8px;
  overflow: hidden;
}
 
.waveform-bar {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 100px;
  background-color: #333;
  animation: waveform-animation 5s linear infinite;
}
 
.waveform-bar:nth-child(1) { animation-delay: -1.5s; }
.waveform-bar:nth-child(2) { animation-delay: -3s; }
.waveform-bar:nth-child(3) { animation-delay: -4.5s; }
.waveform-bar:nth-child(4) { animation-delay: -6s; }
.waveform-bar:nth-child(5) { animation-delay: -7.5s; }
 
@keyframes waveform-animation {
  0% {
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(200px);
  }
}

这段代码创建了一个带有波纹效果的加载动画。每个.waveform-bar代表一个波纹，通过animation属性和@keyframes规则，实现了从左至右移动的动画效果。通过调整.waveform-bar的animation-delay属性，使得每个波纹出现的时间有所延迟，从而模拟出一个连续的波纹动画。