声波条加载动画（Sound Bars Loader 均衡器跳动）

效果演示（真实可交互）

九根音柱以各自错开的节奏上下起伏，高度变化仿佛真实的均衡器在跳动；青 / 暖 / 黑白三套配色覆盖不同气质，速度滑块 0.3× - 2.5× 实时改变跳动节奏。

完整代码

HTML 结构：

<div class="sb-eq">
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

CSS 核心：

.sb-eq {
  --sb-dur: 1.2s;                       /* 一个起伏周期 */
  --sb-color: #35d0d8; --sb-color2: #6c8cff;
  display: flex; align-items: center; gap: 6px; height: 96px;
}
.sb-eq i {
  width: 10px; height: 24px; border-radius: 5px;
  background: linear-gradient(180deg, var(--sb-color), var(--sb-color2));
  animation: sb-wave var(--sb-dur) ease-in-out infinite;
}
/* 每根柱子错开不同相位，模拟真实音乐波形 */
.sb-eq i:nth-child(1) { animation-delay: calc(var(--sb-dur) * -0.9); }
.sb-eq i:nth-child(2) { animation-delay: calc(var(--sb-dur) * -0.62); }
.sb-eq i:nth-child(3) { animation-delay: calc(var(--sb-dur) * -0.35); }
.sb-eq i:nth-child(4) { animation-delay: calc(var(--sb-dur) * -0.72); }
.sb-eq i:nth-child(5) { animation-delay: calc(var(--sb-dur) * -0.2); }
.sb-eq i:nth-child(6) { animation-delay: calc(var(--sb-dur) * -0.5); }
.sb-eq i:nth-child(7) { animation-delay: calc(var(--sb-dur) * -0.8); }
.sb-eq i:nth-child(8) { animation-delay: calc(var(--sb-dur) * -0.42); }
.sb-eq i:nth-child(9) { animation-delay: calc(var(--sb-dur) * -0.66); }

/* 多段高度关键帧，让波形更像随机跳动的音乐节拍 */
@keyframes sb-wave {
  0%, 100% { height: 22px; }
  25%      { height: 88px; }
  50%      { height: 40px; }
  75%      { height: 64px; }
}

JS（调速）： 统一改写 --sb-dur 即可让所有音柱同步变速，相位差保持不变。

参数说明

兼容性与性能

• 只动画 height 属性，音柱数量少时开销可忽略；大量使用时建议改用 transform: scaleY 提升性能
• 兼容 Chrome / Firefox / Safari / Edge 最新版，移动端表现一致
• 纯 CSS 实现，无定时器、无音频依赖，任何页面都可放心使用
• 负延迟（-0.9 × dur 等）让首帧就呈现错落状态，加载瞬间不呆板
• 适合音乐播放器、语音输入、直播互动、AI 语音合成等”声音相关”等待场景，语义贴合

常见问题

Q: 首帧所有柱子一起跳了一下？ 这是因为延迟为 0 的柱子从关键帧起点开始；把所有柱子都改成负延迟（如 -0.1 × dur 到 -0.9 × dur 错开），首帧就不会齐跳。

Q: 想要左右对称的波形（中间高两边低）？ 让中间的柱子延迟为 0，两侧柱子延迟对称分布（如左 0.2s、右 -0.2s），并统一关键帧峰值，即可形成对称波动。

Q: 柱子跳动很生硬怎么办？ 把 animation-timing-function 改为 cubic-bezier(.34,1.56,.64,1) 或 ease-in-out，并在关键帧间增加更多过渡点。

Q: 能接真实音频频谱吗？ 可以，用 Web Audio API 的 AnalyserNode.getByteFrequencyData() 拿频率数据，在 requestAnimationFrame 中逐帧设置每根柱子的 height，CSS 动画仅作为无音频时的降级方案。