小白前端必看：用HTML+CSS搞定音频波纹加载动画（附完整思路）
小白前端必看：用HTML+CSS搞定音频波纹加载动画（附完整思路）
- 小白前端必看：用HTML+CSS搞定音频波纹加载动画（附完整思路）
小白前端必看：用HTML+CSS搞定音频波纹加载动画（附完整思路）
引子：这玩意儿真不是JS写的？
说实话，我第一次在网易云音乐那个黑胶唱片页面看到那个跳动的音波条时，整个人都傻了。那时候刚学会addEventListener没多久，满脑子都是"这得用Web Audio API吧"、“肯定要获取音频流数据吧”、“傅里叶变换听说过但完全不会写啊”……
结果我师父（一个天天穿拖鞋上班的老全栈）瞄了我一眼，默默打开控制台，选中那个动画元素，当我看到Styles面板里只有几个@keyframes和animation-delay的时候，我TM直接蚌埠住了。
纯CSS？就这？
对，就这。那时候我才意识到，前端这行里最唬人的效果，往往实现方式土得掉渣。今天我就把这层窗户纸给你捅破，顺便聊聊这里面那些只有踩过坑才知道的骚操作。
HTML结构：先别急着写样式，想想怎么搭积木
很多人一上来就<div></div>然后开始写CSS，写了一半发现"哎这第5根柱子怎么不跳了"、“高度对不齐”、“产品经理说要加两根怎么办”。结构没想好，后期改到你哭。
最懒人的写法：一堆div硬堆
<divclass="audio-wave"><divclass="bar"></div><divclass="bar"></div><divclass="bar"></div><divclass="bar"></div><divclass="bar"></div></div>简单粗暴，五个div五根柱。但问题来了，如果老板突然说"给我加到20根，要细一点"，你难道要手敲20个div？复制粘贴的时候数错了怎么办？别笑，我真见过实习生数错div数量的，上线后发现只有19根，强迫症用户直接暴躁。
稍微体面点的：用ul-li假装有语义
<ulclass="audio-wave"><liclass="bar"></li><liclass="bar"></li><liclass="bar"></li><liclass="bar"></li><liclass="bar"></li></ul>至少看起来像是在描述"一个列表式的音频可视化组件"，虽然实际上跟ul的本来用途八竿子打不着。但SEO同事看到会很欣慰，觉得你有语义化意识。
我的私藏写法：伪元素大法
如果你只需要5-6根，其实连那么多div都不用写：
<divclass="audio-wave"><divclass="bar"></div></div>然后CSS用::before和::after再变出两根，配合box-shadow再复制几根……算了，这个太邪门了，维护性为零，除非你是在做CSS Battle那种代码 golfing，否则别用。
终极方案：CSS计数器+变量（现代浏览器）
如果你现在还在用Chrome 90+，可以直接上这个：
<divclass="audio-wave"style="--bars: 5"><divclass="bar"style="--i: 0"></div><divclass="bar"style="--i: 1"></div><divclass="bar"style="--i: 2"></div><divclass="bar"style="--i: 3"></div><divclass="bar"style="--i: 4"></div></div>看到那个--i了吗？这是CSS自定义属性，后面配合animation-delay: calc(var(--i) * 0.1s)，错开动画时间贼方便。不用这个的话，你得给每个bar单独写class比如.bar-1、.bar-2，然后分别设置delay，代码量直接爆炸。
但是！ 这里有个巨坑： inline style写CSS变量在某些低端安卓机的WebView里会失效。我之前做个H5活动页，在小米自带浏览器上看动画全同步跳动，完全没有错落感，排查了两小时才发现是CSS变量没解析。所以如果你要兼容古董机，老老实实写class吧。
CSS才是重头戏：让柱子跳起来的黑魔法
现在到了核心的核心。怎么让这堆div看起来像在跟着音乐呼吸？
基础版本：上下伸缩就完事了
.audio-wave{display: flex;align-items: center;/* 关键！让柱子从中间向两边扩 */gap: 4px;height: 40px;}.bar{width: 4px;height: 100%;background: #ff6b6b;border-radius: 2px;/* 核心动画 */animation: wave 1s ease-in-out infinite;}@keyframes wave{0%, 100%{transform:scaleY(0.3);}50%{transform:scaleY(1);}}这里transform: scaleY()是灵魂。千万别用height动画！千万别用！那种会触发重排的属性做动画，在低端机上卡成PPT。transform是合成层动画，GPU加速，丝滑得一批。
align-items: center很重要，不然scaleY是从顶部往下长，看起来是柱子往下掉，而不是上下波动。这个细节我调了半小时才发现。
让它们错开：呼吸感的关键
如果所有柱子一起上下动，那看起来就像个方块在伸缩，完全没有"波纹"的感觉。得让它们有相位差：
.bar:nth-child(1){animation-delay: 0s;}.bar:nth-child(2){animation-delay: 0.1s;}.bar:nth-child(3){animation-delay: 0.2s;}.bar:nth-child(4){animation-delay: 0.3s;}.bar:nth-child(5){animation-delay: 0.4s;}或者用上文提到的CSS变量方案：
.bar{/* ...其他样式 */animation: wave 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * 0.15s);}那个0.15s的间隔是我瞎jb调的，你可以根据柱子数量改。柱子越多间隔越小，不然第一个都落下去了最后一个还没开始起，看起来像波浪而不是呼吸。
cubic-bezier才是灵魂参数
默认的ease-in-out太机械了，就像机器人做广播体操。想让它有那种音乐随性的律动感，得用贝塞尔曲线：
.bar{animation: wave 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;}或者更骚一点的：
/* 模拟那种快起慢回的节奏 */animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);说实话，这些参数我也是抄的。Material Design规范里有推荐值，我直接拿过来用。但你要真让我解释0.4, 0, 0.2, 1代表什么物理意义，我只能说"看起来舒服就行"。
加点随机性：更像真实的音乐
真实的音乐波形不是完美的正弦波，有高有低。可以用animation-duration也错开：
.bar:nth-child(odd){animation-duration: 1.1s;}.bar:nth-child(even){animation-duration: 0.9s;}这样有的柱子快有的柱子慢，看起来就像是"低音部分"和"高音部分"的区别。虽然完全是视觉欺骗，但用户就是吃这套。
完整的基础版代码
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>CSS音频波纹</title><style>body{display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;background: #1a1a2e;}.audio-wave{display: flex;align-items: center;gap: 3px;height: 50px;}.bar{width: 6px;height: 40px;background:linear-gradient(to top, #e94560, #0f3460);border-radius: 3px;/* 基础动画设置 */animation: musicWave 1.2s ease-in-out infinite;transform-origin: bottom;/* 从底部开始缩放 */}/* 给每个柱子不同的延迟，创造波浪效果 */.bar:nth-child(1){animation-delay: 0s;height: 20px;}.bar:nth-child(2){animation-delay: 0.1s;height: 35px;}.bar:nth-child(3){animation-delay: 0.2s;height: 45px;}.bar:nth-child(4){animation-delay: 0.3s;height: 35px;}.bar:nth-child(5){animation-delay: 0.4s;height: 20px;}@keyframes musicWave{0%, 100%{transform:scaleY(0.3);opacity: 0.5;}50%{transform:scaleY(1);opacity: 1;}}/* 鼠标悬停效果，增加交互感 */.audio-wave:hover .bar{background:linear-gradient(to top, #ff6b6b, #feca57);}</style></head><body><divclass="audio-wave"><divclass="bar"></div><divclass="bar"></div><divclass="bar"></div><divclass="bar"></div><divclass="bar"></div></div></body></html>看到那个transform-origin: bottom了吗？如果你不改这个，默认是中心点缩放，柱子会上下同时膨胀，看起来像是悬浮在空中的棍子。改成bottom之后，就像是从地面长出来的，符合直觉。
别被"音频"俩字骗了：视觉欺骗的艺术
现在我要说个大实话，可能会打破你的幻想：市面上90%的"音频波纹加载动画"，跟真实的音频没有半毛钱关系。
包括你现在在看的网易云、QQ音乐、Spotify的播放页面上那个跳动的东西，绝大多数情况下就是上面那段CSS代码在无限循环。哪怕音乐暂停了，那个波纹可能还在那儿跳——因为产品经理觉得"停下来看起来像是卡住了"。
什么时候才真的需要绑定音频？
只有这两种情况：
- 实时频谱分析：比如那种可以上传音频然后显示波形图的网站
- 录音可视化：微信语音输入时那个波形，那是真的在采集麦克风数据
这两种才需要请出Web Audio API这尊大佛，代码量直接翻倍，而且要考虑权限、兼容性、性能各种恶心问题。
纯CSS的视觉作弊技巧
既然只是看起来"像"音乐，那就要研究音乐波形长什么样：
- 有强有弱：所以柱子高度要不一样（前面代码里我故意给不同bar设置了不同height）
- 连续性：相邻柱子高度应该接近，不会突然一个天一个地
- 节奏感：低音部分（通常是两边）波动慢，高音（中间）波动快
所以你可以这样优化：
/* 中间高两边低，模拟常见的频谱分布 */.bar:nth-child(1), .bar:nth-child(5){height: 15px;animation-duration: 1.4s;/* 慢节奏 */}.bar:nth-child(2), .bar:nth-child(4){height: 30px;animation-duration: 1.1s;}.bar:nth-child(3){height: 45px;animation-duration: 0.8s;/* 中间跳最快 */}这种不对称的设计，比五个一模一样的柱子看起来专业得多。用户虽然不知道原理，但会觉得"这很音乐"。
性能坑点：为什么你的动画卡成PPT
写这玩意儿看起来简单，但上线后总有用户反馈"我手机上看好卡"。来，咱们一个个排雷。
坑一：用了会触发重排的属性
最忌讳的就是这样写：
/* 千万别这么干！ */@keyframes badWave{0%{height: 10px;}50%{height: 40px;}100%{height: 10px;}}height变化会导致浏览器重新计算布局（layout），然后重绘（paint），最后合成（composite）。如果同时有20个柱子在变height，低端机直接爆炸。
解决方案：坚持用transform: scaleY()，这样只需要合成阶段，GPU直接搞定。
坑二：will-change乱用
听说过will-change: transform能开启硬件加速，于是有人：
.bar{will-change: transform;}结果页面上20个bar，每个都新建了一个合成层，内存占用飙升。在iPhone上可能没事，在千元安卓机上直接闪退。
正确用法：只在动画真正运行的时候加，或者干脆不加。现代浏览器对transform优化已经很好了，盲目will-change反而坏事。
坑三：层爆炸（Layer Explosion）
如果你给父元素加了overflow: hidden或者border-radius，同时子元素在做transform动画，浏览器为了裁剪可能会创建额外的层。20个bar就是20个层，再加上其他UI元素，层数爆炸。
检查方法：Chrome DevTools -> More tools -> Rendering -> Layer borders，看看是不是满屏橙色的框。
坑四：在不可见区域运行动画
如果这个加载动画是在一个display: none的容器里，或者在视口外，浏览器还是会计算每一帧，浪费CPU。
优化方案：Intersection Observer API监听可见性，不可见时暂停动画（虽然CSS做不到，但可以用JS动态加class暂停）。
// 简单示例：进入视口才开启动画const observer =newIntersectionObserver((entries)=>{ entries.forEach(entry=>{if(entry.isIntersecting){ entry.target.classList.add('playing');}else{ entry.target.classList.remove('playing');}});}); document.querySelectorAll('.audio-wave').forEach(wave=>{ observer.observe(wave);});对应的CSS：
.audio-wave .bar{animation-play-state: paused;}.audio-wave.playing .bar{animation-play-state: running;}坑五：移动端的光标闪烁
在安卓微信上，如果这个波纹区域是可点击的，有时候会出现奇怪的光标闪烁或者选中态。这是因为浏览器以为你在选择文本。
修复：
.audio-wave{user-select: none;-webkit-user-select: none;-webkit-tap-highlight-color: transparent;}那些让人抓狂的排错现场
场景一：高度对不齐，永远差那么1px
你明明设置了align-items: center，但仔细看发现中间那根柱子跟其他不是完美居中对齐，高了1px。
凶手：line-height。如果父元素或者body设置了line-height，inline元素（如果你用span的话）会有额外的高度计算。解决办法是display: flex或者显式设置line-height: 0。
场景二：动画突然停了，刷新又好了
最诡异的情况。排查三小时发现，是因为父容器在某个状态下被设置了display: none，然后又切回display: block。
原理：CSS动画在元素display: none时会暂停，切回来后不一定会自动恢复（浏览器bug）。而且如果用的是animation-fill-mode: forwards，状态可能会乱。
解决：尽量避免display:none切来切去，用visibility: hidden或者opacity: 0代替，或者切回来后重新触发动画（remove再add class）。
场景三：颜色死活改不掉
你在Chrome DevTools里改.bar的background-color，实时预览变了，但刷新页面又没变。
可能原因：
- 有更高优先级的选择器覆盖了（比如
#app .audio-wave .bar） - 用了伪元素但是你在改主元素
- 缓存（这个最蠢但最常见）
调试技巧：DevTools里看Computed面板，看background-color到底被谁覆盖了。
场景四：移动端波纹不跳，PC端正常
大概率是你在meta viewport里忘了加width=device-width，或者CSS单位用了px但在某些安卓机上DPR计算有问题。
试试用rem或者vw单位：
.bar{width: 0.5rem;gap: 0.125rem;}场景五：我想在中间加个暂停图标，结果波纹全乱了
在flex容器里插入一个绝对定位的元素，如果没写好z-index和定位，可能会影响其他flex item的布局。
建议：把波纹和图标分开放：
<divclass="player-wrapper"><divclass="audio-wave"><divclass="bar"></div><!-- ... --></div><buttonclass="play-btn">▶</button></div>而不是试图把按钮塞进.audio-wave里面。
进阶骚操作：真·随音乐跳动（装X专用）
如果你看完了上面的内容，还是觉得"不行，我就要真的音频数据"，那行，上硬菜。
Web Audio API + CSS变量联动
<divclass="real-audio-wave"><divclass="bar"style="--volume: 0.5"></div><divclass="bar"style="--volume: 0.5"></div><divclass="bar"style="--volume: 0.5"></div><divclass="bar"style="--volume: 0.5"></div><divclass="bar"style="--volume: 0.5"></div></div><audioid="audio"src="your-music.mp3"controls></audio><buttononclick="startVisualize()">开始可视化</button>.real-audio-wave .bar{width: 10px;background: #00ff88;height:calc(var(--volume) * 100px);/* 动态高度 */transition: height 0.05s ease-out;/* 平滑过渡 */transform-origin: bottom;}let audioContext, analyser, dataArray;functionstartVisualize(){const audio = document.getElementById('audio');// 创建音频上下文 audioContext =new(window.AudioContext || window.webkitAudioContext)(); analyser = audioContext.createAnalyser();// 连接音频源const source = audioContext.createMediaElementSource(audio); source.connect(analyser); analyser.connect(audioContext.destination); analyser.fftSize =32;// 越小柱子越粗，频率数据越少 dataArray =newUint8Array(analyser.frequencyBinCount); audio.play();draw();}functiondraw(){requestAnimationFrame(draw); analyser.getByteFrequencyData(dataArray);// 获取频域数据const bars = document.querySelectorAll('.real-audio-wave .bar');// 将音频数据映射到CSS变量 bars.forEach((bar, index)=>{// dataArray长度可能大于bars数量，取模或者只取前几个const value = dataArray[index]||0;const percent = value /255;// 归一化到0-1 bar.style.setProperty('--volume', percent);});}这段代码就能让柱子真的跟着音乐高低起伏了。但要注意：
- 跨域问题：如果音频是外链，需要CORS头，否则
createMediaElementSource会报错 - 性能：
requestAnimationFrame+ 更新CSS变量，在移动端20个柱子可能还行，再多会卡 - 兼容性：iOS Safari需要用户交互后才能创建AudioContext（防自动播放策略）
而且你会发现，真实的音乐波形其实没有CSS循环动画好看。真实音乐有很多静音间隙，看起来柱子会突然矮下去，不如CSS那种永不停歇的律动看着"高级"。所以这就是个装X功能，实际产品慎用。
最后唠叨：别把简单事搞复杂
我见过最离谱的代码，有人为了个加载动画引入了GSAP，写了80行JS，打包体积多了30KB，就为了做一个我刚才用5个div就能实现的效果。
还有人在React里把这5个div封装成了一个组件，然后props传了20个配置项：颜色、速度、高度、柱子数量、动画类型、回调函数……其实直接写死CSS，需要改的时候改一下样式表，五分钟的事。
前端圈子有个怪病，就是"为了技术而技术"。明明CSS能搞定，非要上Canvas；明明静态效果够用了，非要接Web Audio；明明5个div就行，非要搞个配置化组件生成器。
记住几个原则：
- 性能优先：用户手机发烫、掉电快，比"代码优雅"可怕一万倍
- 可维护性：接你班的可能是三个月后的你自己，写那么复杂你确定还记得怎么改？
- 渐进增强：先保证纯CSS版本能跑，再考虑加JS增强
那个音频波纹加载动画，说到底就是个视觉欺骗。用户盯着看不会超过3秒，只要在这3秒内看起来像那么回事，任务就完成了。别为了追求"真实"给自己挖坑，老板不会因此给你涨工资，但页面卡了用户一定会骂娘。
好了，代码都给你了，直接复制粘贴改改颜色就能用。去跟产品经理对线吧，如果他再说"感觉跳动得不够有节奏"，你就把cubic-bezier参数调乱一点，然后告诉他"这是模拟爵士乐的切分音"。
反正他也听不懂，大概率会回复：“哦，专业！就按这个来。”
完事儿。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
