先看效果：

🎧 深色背景下的霓虹音频柱 

✨ 高度 + 颜色 + 位置同时变化的节奏感动画 

🎵 5 根柱子错峰跳动，像真实均衡器 

⚡ 纯 HTML + CSS，无一行 JS

🧠 技术亮点

这次依旧坚持“用最少的代码实现最顺滑的交互”：

• 一个容器类名：.sound-wave — 控制布局

• 一个关键帧动画：audio-wave — 控制弹跳 + 变色

• 几个延迟：nth-child — 做错位节奏

全部结构只有这样：

<div class="sound-wave">
  <div></div><div></div><div></div><div></div><div></div>
</div>

🧩 关键 CSS

1️⃣ 布局 + 子元素尺寸

.sound-wave {
  display: flex; gap: .5rem;
}
.sound-wave div {
  width: .6rem; height: .4rem;
  border-radius: .5rem;
  animation: audio-wave 2.2s infinite ease-in-out;
}

2️⃣ 动画：高度 + 位移 + 渐变色

@keyframes audio-wave {
  0%,100% { height:6px; background:#ff8e3a; }
  25% { height:40px; transform:translateY(-5px); background:#ed509e; }
  50% { height:6px; background:#9c73f8; }
}

3️⃣ 错峰节奏（灵魂所在）

.sound-wave div:nth-child(2){animation-delay:.2s}
.sound-wave div:nth-child(3){animation-delay:.4s}
.sound-wave div:nth-child(4){animation-delay:.6s}
.sound-wave div:nth-child(5){animation-delay:.8s}

📚 3 个核心知识点

1. 一个关键帧控制多个视觉属性：高度、Y 位置、背景色

2. 延迟错峰：用 nth-child 做出“音频跳动”的节奏感

3. 用最少结构实现可复用组件：5 根柱子即可形成连贯动效

🔗 完整代码（可直接复制）

👇 点击「原文链接」查看：

• 完整 HTML / CSS（含深色主题）

• 如何扩展成 ChatGPT 风格的「思考中动画」

• 如何做成播放器 Loading / Buffering

• 如何把颜色抽离成 CSS 变量，2 秒换主题

如果你正在做播放器、AI assistant、语音组件，这个「音频波形动效」直接就是开箱即用的小组件。