纯CSS频率条动画本质是伪动态，用scaleY配合错开的animation-delay模拟跳动，并非真实频谱；需Web Audio API才能实现真实音频响应。
用 scaleY 做频率条动画，本质是伪动态——它不读取真实音频数据
直接说结论：纯 CSS 实现的“类似 Spotify 的频率条”，其实是用 scaleY 配合 animation-delay 模拟跳动节奏，不是真频谱。Spotify 客户端底层调用 Web Audio API 获取 FFT 数据，而纯 CSS 方案只能靠预设动画序列“装得像”。如果你需要真实响应音乐的条形图，CSS 不够用；但若只是 UI 装饰、加载占位或 demo 演示，这个方案轻量、无 JS、兼容性好。
写法核心：每个条独立动画 + 错开 animation-delay
关键不是让所有条一起缩放，而是让它们像波浪一样依次起伏。每个 <div class="bar"> 都应用同一段 @keyframes，但通过不同 animation-delay 错开起始时间：
@keyframes pulse {
0%, 100% { transform: scaleY(0.1); }
50% { transform: scaleY(0.9); }
}
.bar {
animation: pulse 1.2s ease-in-out infinite;
}
.bar:nth-child(1) { animation-delay: 0s; }
.bar:nth-child(2) { animation-delay: 0.08s; }
.bar:nth-child(3) { animation-delay: 0.16s; }
/* 依此类推，步长建议 0.06–0.1s */
- 动画时长（
1.2s）太短会显得急促，太长则滞重；Spotify 视觉节奏偏快，0.9–1.3s 区间较自然 -
ease-in-out比linear更有“弹性感”，避免机械式上下 - 条数建议 12–24 根：少于 10 根缺乏频谱感，多于 30 根在小屏上挤成糊状
- 别用
%做animation-delay—— 浏览器不支持，必须是s或ms
用 scaleY 而不是 height，原因很实在
用 transform: scaleY() 是硬性推荐，不是炫技：
-
height触发 layout，动画卡顿明显，尤其在低端 Android 设备上 -
scaleY属于合成层属性，走 GPU 加速，60fps 更稳 - 如果条有边框或阴影，
scaleY会等比缩放它们；而height只改高度，容易导致视觉断裂 - 注意：
transform-origin: bottom必须设，否则缩放中心在中点，条会“漂”起来
常见翻车点：父容器溢出、颜色过渡生硬、移动端失真
实际贴进项目时，这几个坑几乎必踩一次：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
overflow: hidden→ 条缩放超出区域，页面被撑开或出现横向滚动条 - 所有条用同一色值 → 缺乏层次感；建议按位置渐变：前段蓝（低频）、中段绿（中频）、后段红（高频），用
background: linear-gradient(...)或逐个设background-color - 在 iOS Safari 上，
transform: scaleY()配合 flex 布局偶尔闪白 —— 加backface-visibility: hidden或will-change: transform可缓解 - 别在
@media (prefers-reduced-motion: reduce)下还硬开动画；加媒体查询关掉：@media (prefers-reduced-motion: reduce) { .bar { animation: none; } }
真正难的不是写出第一版动画，而是让 20 根条在 Chrome/Firefox/Safari/iOS/Android 各种组合下都保持节奏一致、不撕裂、不掉帧。动手前先想清楚：你到底要“看起来像”，还是“能跟着当前播放的歌实时动”——前者 CSS 足够，后者绕不开 AudioContext 和 analyserNode。
