原生组件案例 04：5 个 div 打造「音频波形动效」

前端达人2025-11-18 21:57

先看效果：

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

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

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

⚡ 纯 HTML + CSS，无一行 JS

🧠 技术亮点

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

一个容器类名 ：.sound-wave --- 控制布局
一个关键帧动画 ：audio-wave --- 控制弹跳 + 变色
几个延迟 ：nth-child --- 做错位节奏

全部结构只有这样：

go 复制代码

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

🧩 关键 CSS

1️⃣ 布局 + 子元素尺寸

go 复制代码

.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️⃣ 动画：高度 + 位移 + 渐变色

go 复制代码

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

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

go 复制代码

.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 个核心知识点

一个关键帧控制多个视觉属性：高度、Y 位置、背景色
延迟错峰 ：用 nth-child 做出"音频跳动"的节奏感
用最少结构实现可复用组件：5 根柱子即可形成连贯动效

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

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

完整 HTML / CSS（含深色主题）
如何扩展成 ChatGPT 风格的「思考中动画」
如何做成播放器 Loading / Buffering
如何把颜色抽离成 CSS 变量，2 秒换主题

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