纯CSS复刻音频波纹加载动画从原理到两种实用变体做前端这些年我收藏了不少CSS特效但真正能在项目里落地的其实不多。音频波纹加载律动算一个——它不挑场景加载页面能用播放器能用语音助手能用就连表单提交的等待状态都能套上去。核心原理不复杂但要做好看、做流畅有几个细节值得抠一抠。这篇就把我实际写这套动画的完整思路和踩过的坑分享出来新手能照抄老手也能看看有没有可优化的空间。很多人以为音频波纹效果一定要依赖音频数据驱动其实纯CSS就能模拟出那个味道。我们用keyframes做核心动画用nth-child控制每根“音柱”的延迟时间再配合transform: scaleY()做伸缩变化就能实现类似音乐频谱的上下跳动效果。整个过程不需要一行JavaScript加载页面上直接引样式就行。1. 整体设计思路与方案选型1.1 为什么选择纯CSS而非Canvas或JS方案做音频波纹市面上其实有三条路Canvas绘制、SVG动画、纯CSS。Canvas方案灵活度最高能画任意形状但有一个致命问题——需要JS维护绘制循环每次重绘都占用主线程。如果你的页面同时跑着首屏请求、埋点上报、图片懒加载这些任务Canvas动画的帧率会明显掉下来。SVG方案在波形图、复杂曲线场景表现好但音频波纹这种重复性极强的条形动画用SVG反而代码量更大每个条都要定义rect或path可控性也不如CSS分层清晰。纯CSS方案的压倒性优势在于动画逻辑完全交给GPU合成层transform和opacity的动画不会触发重排和重绘浏览器会把它提升到独立的合成层处理。实测下来在普通中端手机上30根音频柱同时动画用纯CSS能稳定在60fps而用JS的requestAnimationFrame循环设置高度属性帧率会跌到40左右。对于加载动画这种需要“越快越顺滑”才显得专业的小组件性能就是第一优先级。另外纯CSS还有一个隐形的优点它天然支持降级。如果哪天真要挂到不支持animation的老浏览器上静态的一组条形至少还能当个装饰底纹不耽误功能使用。这一点在ToB项目、政企内网系统里挺重要那些环境的浏览器版本往往落后于主流市场好几年。1.2 这套动画的三大核心要素拆解这个特效实际上就三件事结构、节奏、状态变化。结构层面我们需要一组纵向排列的条形元素。常见做法是div套若干span兄弟节点或者直接在CSS里用::before、::after加两层伪元素配合box-shadow复制出更多条形。但后者的数量受选择器层数的限制最多也就复制出十几根所以我更建议用显式的HTML结构条数可配置语义也更清楚。节奏层面这是音频波纹动画的灵魂。每根柱子不能同步跳动那样看起来像“触电”而不是“波动”。必须通过animation-delay让每根柱子的动画错开起步形成从前往后、依次起伏的波浪感。延迟时间的公式很简单delay index × 基础间隔。基础间隔一般取60ms到120ms之间间隔太小整体看着像群魔乱舞间隔太大会感觉柱子之间的动作断裂。状态变化层面柱子要有节奏地升高、降低。动画设计上每根柱子在一个完整周期里至少经历四个状态低位待机、快速上升、高位悬停、回落然后再进入下一轮。不能简单地在0%和100%之间交替两种高度那是呼吸灯不是音频波纹。音频波纹的特征是“爆发式的上升渐变式的下落”上升快、下落缓这个非对称的时间分布才是它看起来像音频频谱的关键。1.3 应用场景与适配边界我在实际项目里用到过它三个场景你可以参考第一个是页面首屏的骨架屏加载态用音频波纹替代传统的转圈loading视觉上明显更有新意第二个是音频播放器的“试听中”状态配合播放按钮切换成暂停图标波纹继续动用户一看就知道内容还在加载、马上就能放第三个是语音对话助手的“聆听中”提示把波纹颜色换成品牌主色调比单纯一个麦克风图标有更强的“此刻正在收音”的暗示。适配边界也要提一下这种特效最怕的是背景花哨。音频波纹的纹理感很强遇到花背景会互相打架。我建议承载它的容器保持纯色或半透明遮罩给波纹留出干净的视觉空间。另外如果波纹的尺寸跨度太大比如在PC上设计成500px宽直接缩放适配到320px宽的手机屏柱子的间距会被压缩得很难看。更好的是用媒体查询在窄屏上减少柱子数量而不是用transform: scale()整体缩小。2. 核心原理拆解动画参数与关键CSS规则2.1 条形元素的结构搭建与样式基础先把HTML结构摆出来这是整个效果的骨架div classaudio-wave aria-label加载中 rolestatus span/span span/span span/span span/span span/span span/span span/span span/span span/span span/span span/span span/span /div12根柱子是一个比较均衡的数量视觉效果足够丰满每根柱子的动画延迟值也不会叠加得过于夸张。柱子的本质是包含块的直接子元素因此必须给容器设置display: flex并把align-items: center加上。这里我强调一下align-items的作用——transform: scaleY()的缩放默认是围绕元素中心点进行的但这只对单个元素成立。如果柱子是靠align-items: flex-end顶着底部摆放的缩放时它们的底边对齐顶部上下伸缩视觉上“从底部升起”的效果会更强。两种方式都可以取决于你想让波纹是“居中对称波动”还是“贴着底部波动”。基础的CSS样式如下.audio-wave { display: flex; align-items: center; gap: 4px; height: 60px; } .audio-wave span { width: 6px; height: 30px; background: linear-gradient(180deg, #4facfe, #00f2fe); border-radius: 3px; transform: scaleY(0.4); transform-origin: center; }关键点在于transform-origin: center。如果不显式设置这一行默认值就是center所以还能正常工作。但一旦你之后为了效果调整了transform-origin动画的整个视觉逻辑就会变化。这里显式写出来是一个好习惯——明确告知浏览器这个条形的高度变换以几何中心为基准。另外要注意border-radius和transform: scaleY()的组合。当圆角半径接近柱宽的一半也就是做成胶囊形时柱子被压缩到最低状态下依然是一个扁圆形视觉过渡比较柔和。如果柱子是直角矩形缩放过程中会显得生硬边缘还会出现锯齿感。2.2 keyframes动画节奏设计动画的keyframes是核心中的核心。我经过多次调整最终用了一套非对称的时间曲线模拟音频频谱那种“能量爆发后自然衰减”的运动特征keyframes waveJump { 0%, 100% { transform: scaleY(0.3); } 30% { transform: scaleY(1); } 60% { transform: scaleY(0.6); } 80% { transform: scaleY(0.9); } }在0%和100%的位置柱子维持在一个比较低的高度这是待机状态。到30%的位置拉到最高点完成“爆发的上升”。然后从30%到60%是一个相对陡峭的下跌但跌到半高度时又反弹回接近高位——音频数据从来不是平滑的单峰中间会有次峰和余振。最后从80%再缓缓回落到低位完成一整个周期。你可能好奇为什么不止用0%和100%两个关键帧而要多加两层。如果只设置两种状态动画在两点之间来回匀速运动视觉上就像心跳监视器一样规律到呆板。真实的音频数据是杂乱的没有两个等长周期完全一样所以在关键帧里人为制造“不对称”波纹才能有生命感。动画时长方面我的建议是每个周期700ms到900ms。太短会产生眩晕感加载提示反而给用户带来焦虑太长会让人以为页面卡住了。800ms是一个视觉上比较从容的节奏。2.3 animation-delay的间隔计算与错峰原理做完单根柱子的动画剩下来就是让它们“你方唱罢我登场”。CSS里没有内置的“逐个子元素顺序延迟”方法所以我们用nth-child逐个设置延迟。常规做法是这样.audio-wave span:nth-child(1) { animation-delay: 0ms; } .audio-wave span:nth-child(2) { animation-delay: 100ms; } .audio-wave span:nth-child(3) { animation-delay: 200ms; } ...这种写法的问题很明显柱子越多CSS代码越臃肿。而且延迟是等差递增的波纹只能呈现一个方向的运动缺少层次感。我自己用惯的是一个“分组错峰”的策略——把柱子分成前中后三组每组内部有轻微延迟差异组与组之间用更大的延迟差形成波次推进。这样12根柱子看起来是两到三个波峰在交替涌动而不是一根简单的单波直线前进。分享一个我常用的延迟表柱子序号延迟时间柱子序号延迟时间第1根0ms第7根180ms第2根60ms第8根120ms第3根120ms第9根60ms第4根180ms第10根0ms第5根120ms第11根-120ms第6根60ms第12根-60ms这个表遵循了一个原则从两端向中间收缩的延迟差外加反向的负延迟。负延迟是一个很实用的技巧把某个柱子的animation-delay设为负值动画会立即从周期中途的状态开始播放而不是等所有人都从0%起步。这消除了初始加载时的“集体静止再齐跳”的突兀感让页面一打开就看到波纹已经在律动中。2.4 如何让波纹“循环但不重复”animation-iteration-count: infinite是必须的但仅有这个还不够。动画时长和延迟的组合如果不当整个波纹会呈现出某个可见的“堵点”或“卡住”的瞬间。比如所有柱子都在同一帧降到最低点那波纹看起来就像屏了一口气停了一下。要避免这种感觉你需要让每个柱子的动画时长不完全相同。同是800ms有的柱子给790ms有的给810ms有的给740ms。差值虽然只有几十毫秒但经过几个循环之后柱子之间的相位关系会发生漂移视觉上就产生了“这个管子的跳动模式和旁边那根不一样”的自然错落感。这正是音频数据本来的特征。我给不同区域柱子的推荐时长前4根低音区视觉对应animation-duration: 900ms中间4根中音区视觉对应animation-duration: 750ms后4根高音区视觉对应animation-duration: 600ms低音区缓慢沉重高音区快速轻盈这和音频频谱的物理特征是对应的做出来的加载动画也就更有“音频感”。注意这是视觉隐喻不代表真的要解析音频数据但方向是对的。3. 完整实操过程与效果配置3.1 基础版纯CSS音频波纹加载组件下面给一套可以直接拷贝到项目里使用的完整代码。我做了些微调让它兼容性更好观感也经过了实际页面的检验。HTML结构保持前文的结构但容器加了aria-label作无障碍标识div classcss-wave-loader aria-label内容加载中 rolestatus span/span span/span span/span span/span span/span span/span span/span span/span span/span span/span span/span span/span /div配套CSS.css-wave-loader { display: flex; align-items: center; justify-content: center; gap: 4px; height: 64px; } .css-wave-loader span { width: 5px; height: 32px; border-radius: 3px; background: linear-gradient(to top, #3a7bd5, #3a6073); animation: cssWave jump 800ms ease-in-out infinite; transform: scaleY(0.4); transform-origin: center; } .css-wave-loader span:nth-child(1) { animation-duration: 900ms; animation-delay: 0ms; } .css-wave-loader span:nth-child(2) { animation-duration: 800ms; animation-delay: 80ms; } .css-wave-loader span:nth-child(3) { animation-duration: 750ms; animation-delay: 160ms; } .css-wave-loader span:nth-child(4) { animation-duration: 700ms; animation-delay: 240ms; } .css-wave-loader span:nth-child(5) { animation-duration: 800ms; animation-delay: 120ms; } .css-wave-loader span:nth-child(6) { animation-duration: 750ms; animation-delay: 40ms; } .css-wave-loader span:nth-child(7) { animation-duration: 850ms; animation-delay: -80ms; } .css-wave-loader span:nth-child(8) { animation-duration: 780ms; animation-delay: -160ms; } .css-wave-loader span:nth-child(9) { animation-duration: 720ms; animation-delay: -200ms; } .css-wave-loader span:nth-child(10) { animation-duration: 820ms; animation-delay: -120ms; } .css-wave-loader span:nth-child(11) { animation-duration: 880ms; animation-delay: -60ms; } .css-wave-loader span:nth-child(12) { animation-duration: 840ms; animation-delay: -20ms; } keyframes cssWaveJump { 0%, 100% { transform: scaleY(0.3); } 30% { transform: scaleY(1); } 60% { transform: scaleY(0.6); } 80% { transform: scaleY(0.85); } }代码里有几个细节说下渐变背景用的是蓝色系从上到下由深蓝过渡到蓝灰色视觉上比纯色更有质感而且深色的上部在柱子升高时能给人“载入中”的重量感。每根柱子的延迟时间刻意打散了集中在0到240ms之间再叠加负延迟保证起步时的波形已经自然分布。动画时长集中在700-900ms区间没有差得太多保持整体节奏统一但每根柱子又略有自己的“脾气”。把这段代码放到页面上你看到的效果是波纹从第一根柱子的方向开始涌动中间到两边交替起伏像有旋律在播放一样。搭配一个半透明的深色背景遮罩加载提示的效果尤其突出。3.2 进阶版带颜色渐变和光晕的视觉升级基础版够用但在品牌的着陆页、活动H5这类场景里你可能希望它更“出挑”一些。我做进阶版的时候主要加了三个东西柱子的颜色流动、整体的旋转光圈、以及每根柱子下端的发光点。颜色流动利用了background不支持直接动画的局限通过filter: hue-rotate()对整个容器做色相旋转。让波纹整体从蓝色系慢慢过渡到紫色、粉色再回到蓝色形成一个缓慢的循环。这招不用额外写动画只需要给容器加一条规则.css-wave-loader--colorful { animation: hueCycle 6s linear infinite; } keyframes hueCycle { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }注意这个动画是作用在容器上的所有子元素都会同步变色因此视觉上是统一变色的不是每根柱子独立变色。如果你希望每根柱子各自变色那得给每根柱子单独设置animation把filter的变化定义到柱子自己的动画里。但这会让代码量暴增而且每根柱子之间的色相差如果控制不好容易变得非常花哨反而压过了波纹律动的主效果。光晕效果可以通过给柱子加box-shadow实现每根柱子的阴影颜色和柱子颜色一致。因为这是静态属性动画只变化柱子的缩放阴影也会同步缩放产生一种柱子发光并在缩放中呼吸的错觉。.css-wave-loader--glow span { box-shadow: 0 0 8px rgba(58, 123, 213, 0.6); }这个效果在深色背景下很出彩但在浅色背景下几乎看不出来。如果你要用在浅色页面建议不做光晕改为降低柱子自身的透明度用半透明叠加制造层次感。3.3 玩法扩展用JS随机触发振幅变化纯CSS方案有一个天然的局限动画是无限循环的振幅、频率都是固定的。如果你是做一个播放器手头已经有音频数据了比如通过Web Audio API拿到了实时的频率幅值想让波纹真实地跟随音乐“跳动”那纯CSS就不够了。但也不需要完全推翻重写可以把CSS动画作为一个“基础波动层”再用JS动态修改柱子的缩放值两层叠加。简单的示意逻辑如下function getAudioAmplitude() { // 假设这里通过 AnalyserNode 拿到了 0~255 的频域数据 // 返回当前帧的某个频段平均值 return Math.random() * 255; } function updateWave() { const bars document.querySelectorAll(.css-wave-loader span); const amplitude getAudioAmplitude(); bars.forEach((bar, index) { const scale 0.4 (amplitude / 255) * (0.8 - index * 0.02); bar.style.transform scaleY(${scale.toFixed(3)}); }); requestAnimationFrame(updateWave); }这里的scale计算是一个简化版本实际上你需要根据每个柱子对应的频段来映射振幅低频段映射前几根柱子高频段映射后几根柱子。而且requestAnimationFrame回调会覆盖CSS动画对transform的控制所以如果你要用JS驱动记得先移除柱子上的animation属性否则两层控制会互相打架。考虑到本篇文章主要讲纯CSS实现JS驱动这块我只提供思路不展开成完整代码。真要实现实时音频驱动建议直接考虑Canvas方案逻辑反而更顺畅。3.4 性能调优与无障碍设计性能是这类微动画不可回避的话题。虽然CSS动画的transform是合成器属性理论上性能表现好但有几个坑不避会让性能直线下降第一柱子数量不宜过多。很多人觉得波纹要密集才好看一根接一根排满容器。但每增加一根柱子浏览器动画合成层就多一个独立的绘制单元。30根以内的柱子性能无忧超过50根便开始出现掉帧风险。我建议宽屏布局下最多24根常规布局12根最合适。第二gap属性虽然方便但在某些老浏览器的flex实现中会触发额外的布局计算。如果你追求极限性能可以改用margin-right来给柱子间隔牺牲一点代码优雅度换来更可靠的兼容性。第三背景装饰和阴影会放大重绘成本。前文提到的box-shadow光晕效果每帧重绘时阴影计算的耗时要远高于柱子本身的缩放。如果你的页面主线程繁忙建议去掉阴影改为用一个半透明渐变容器模拟光感。无障碍设计这块经常被忽略但这个特效的形态本身是一种“状态提示”用户需要知道“当前正在加载”。推荐的做法是在容器上加rolestatus和aria-label内容加载中。我前文的代码已经带了这两个属性。更进一步如果加载完成后波纹会被移除记得把aria-label内容同步更新成“加载完成”否则屏幕阅读器用户会一直停留在“加载中”的提示状态里。另外部分用户对持续运动的动画比较敏感甚至可能引发头晕。现代操作系统普遍支持“减少动态效果”的设置。我们可以用prefers-reduced-motion这个媒体查询主动关闭动画media (prefers-reduced-motion: reduce) { .css-wave-loader span { animation: none; transform: scaleY(0.5); } }这样尊重了用户偏好同时也让动画组件在低功耗模式下不白白消耗GPU资源。这个细节在面向C端的产品中尤其值得注意。4. 常见问题与排查技巧实录4.1 波纹不动或动画终止的排查思路做这个特效的时候我最常被问到的问题是“为什么我的波纹不动”。先别急着怀疑浏览器大概率是基础样式的问题。第一检查transform-origin我前文已经强调过如果柱子默认的transform值缺失动画开始前元素在正常位置动画开始后第一帧跳到缩放0.3的状态这个跳变会让人觉得动画“卡了一下”而不是“波”起来。第二检查容器的display: flex如果没有设置子元素会按块级元素从上往下排列成一行竖直的柱子你在页面上只会看到一条竖线在动完全不是波纹效果。第三检查父容器是否设置了固定的高度。如果父容器高度是auto柱子的height设为百分比就会失效严重时动画也无法正常执行。还有一个比较隐蔽的坑某些CSS重置或UI框架的全局样式会覆盖span的默认显示方式。比如Element UI的reset样式里设置了span { display: inline; }此时span的width和height都不会生效整组柱子变成12个看不见或被压缩的节点。所以我在组件里会再加上一条display: block;确保结构独立.css-wave-loader span { display: block; /* 其余样式保持不变 */ }4.2 动画卡顿与CPU占用异常的处理动画能跑但掉帧这是很多人会遇到的问题。排查思路从硬件加速入手。transform: scaleY()虽然在理想情况下会走GPU合成器但浏览器判定是否走合成器是有条件的——元素不能有影响布局的兄弟元素在同一层。如果你把这组波纹放在一个极其复杂的页面层级里比如父容器有大量浮动、绝对定位元素合成层判定可能会失效动画转为CPU重绘。处理办法是给容器显式提升合成层.css-wave-loader { will-change: transform; }will-change会告知浏览器“这个元素接下来可能发生transform变化”促使它提前把元素分配给合成层。注意will-change不能滥用用完及时在动画结束时去掉否则会一直占用GPU内存。不过对加载动画这种生命周期极短的组件一直开着也无妨。CPU占用异常还有一个常见原因动画的贝塞尔缓动函数不合适。ease-in-out是最常用的但它在两个端点都会减速波纹的上升和下落会变得过于圆滑缺少爆发力。改成cubic-bezier(0.45, 0, 0.55, 1)或者cubic-bezier(0.25, 0.46, 0.45, 0.94)动画会更流畅。我实测发现偏函数的曲率会影响CPU计算量极端曲线如cubic-bezier(0.9, -0.3, 0.3, 1.3)带弹性效果在某些浏览器上每帧要额外计算插值负载略高。但这不构成绝对差异主要还是看你动画的持续时间与柱子数量。4.3 移动端适配和触控事件冲突移动端使用时要特别注意两个问题。第一个是触控事件的干扰。在手机上动画本身不会影响触摸事件但如果波纹容器做成了可点击区域比如点击波纹区域触发加载重试、点击暂停恢复等交互那么动画的持续重绘有可能干扰触控精度。解决办法是在需要触控的子元素上设置pointer-events: auto在波纹容器上设置pointer-events: none。这样点击波纹本身不会有响应只有点击明确的可交互区域才触发事件。第二个是刘海屏/全面屏的安全区适配。如果你把波纹加载器放在页面底部像播放器那样需要给容器加上padding-bottom: env(safe-area-inset-bottom)否则波纹会被刘海屏底部指示条遮挡。同理放在顶部则用padding-top: env(safe-area-inset-top)。还有一个小经验移动端不建议用vh单位给容器设定高度。移动浏览器的地址栏隐藏和弹出会让vh的视觉高度频繁变化波纹的垂直位置就会跳动。用固定的px高度或者min-height更稳。4.4 常见问题速查表把我在评论区收集到的高频问题整理成一个速查表方便你对照排查现象可能原因处理方式柱子静止不动容器没有display: flex给容器加display: flex; align-items: center;所有柱子同步起跳animation-delay未设置或全部为0用nth-child为每根柱子设置不同延迟首帧出现集体闪烁transform初始值和动画首帧不一致给元素设置和动画0%状态相同的transform值动画跑完一次就停未设置infiniteanimation-iteration-count: infinite;动画在Chrome卡顿合成层未提升加will-change: transform;手机上动画掉帧柱子数量过多或阴影过重减少柱子数量到12~16根去掉box-shadow波纹位置在加载过程中跳动容器高度依赖内容撑开给容器设置固定高度或最小高度波纹与背景颜色太接近看不见缺少层次感柱子改用渐变背景或加深柱子的对比色4.5 我在实际调试中发现的额外细节调试过程中我注意到一个不算bug但体验上很影响观感的细节当动画处于循环播放时最后一个周期结束后进入下一个周期如果最后一根柱子和第一根柱子的动画相位差过大会有一个“循环边界”的突兀感。解决方式有两种一种是确保所有柱子的动画时长呈等差数列这样循环边界处所有柱子都回到起始状态视觉上是整齐的重新开始——但这样又会失去“自然错落”的效果另一种是接受错落感但尽量让每根柱子在周期结束时的状态接近起始状态不能出现最后一根柱子还停留在高位而第一根已经跳到低位的情况。我采取的折中方案是所有柱子的animation-duration在整体上保持接近差不超过200ms同时用负延迟让初始相位已经错开。这样循环边界的突兀感被负延迟“预置”掉了因为每次你看到波形时它已经处于某个中间相位而不是所有柱子统一回到0%。还有一个细节是关于border-radius的。当柱子的高度被压缩到很小时border-radius如果设置成固定像素圆角看起来会夸张地大。更优雅的做法是用border-radius: 999px这个值在任何尺寸下都会自适应为胶囊形不用关心柱子缩放后的具体高度。这是我在一次UI走查时被视觉同事指出来的虽然是很小的观感差异但“自适应圆角”比“固定圆角”省心得多。5. 从特效组件到设计语言提升模块的复用度做到这里一套完整的音频波纹加载律动已经可以正常工作。但我还建议你多走一步——把这套特效抽象成可配置的CSS变量而非写死的样式。这样同一套CSS可以适配品牌色、不同密度、不同场景不用每次复制粘贴再手工改参数。我给自己的组件添加了这样几个变量.css-wave-loader { --wave-bar-count: 12; --wave-bar-width: 5px; --wave-bar-height: 32px; --wave-bar-gap: 4px; --wave-duration: 800ms; --wave-color-start: #3a7bd5; --wave-color-end: #3a6073; height: 64px; }柱子的样式用calc和var组合.css-wave-loader span { width: var(--wave-bar-width); height: var(--wave-bar-height); background: linear-gradient( to top, var(--wave-color-start), var(--wave-color-end) ); animation-duration: var(--wave-duration); }高级玩法是让--wave-duration在不同场景传入不同的值首屏加载时用800ms音乐试听时用600ms语音等待时用1000ms。同一个组件三种体验。柱子的数量如果想完全通过CSS配置可以通过设置style--wave-bar-count: 8然后结合nth-child的兼容策略来减少数量显示。但因为--wave-bar-count不能直接控制HTML中span标签的数量最实用的做法还是直接在HTML层面控制JS渲染时动态生成对应数量的span即可。比如React里一个简单循环就能完成const bars Array.from({ length: waveBarCount }, (_, i) ( span key{i} style{{ animationDelay: ${i * 60}ms }} / ));JS控制生成还有一个好处延迟时间可以通过JS传入不用手动维护一串nth-child规则。如果你要在多个页面高密度复用这个组件我强烈建议改用JS模板渲染的方式生成柱子和延迟值。6. 关于这套组件后续扩展的一些方向到了这里这套音频波纹加载律动已经具备完整的可用性、可维护性和可扩展性。分享一点我长期维护CSS组件的心得特效组件最容易死掉的原因是“无法响应业务变化”。今天要蓝色波纹明天要红色波纹后天要改成圆点律动如果每次都改源码你会疲惫业务方也会觉得你不专业。所以从一开始就把颜色、尺寸、速度、数量抽成变量其实是一种礼貌——对自己的时间也对未来接手的人。我在这套组件的基础上曾经扩展出了一个极简的音频播放器视觉方案播放中显示波纹暂停时波纹静止在低位播放结束后波纹完全隐藏。整个逻辑只依靠切换一个is-playing类名就能完成CSS动画完全复用。有兴趣的人可以往这个方向再玩一下。最后说一个关于CSS动画的体会做这种视觉特效最忌讳的是“我觉得已经够复杂了”。波纹律动的临场表现、加载进度的联动、异常状态的降级这些往往比“波纹本身像不像音频频谱”更重要。一个加载动画的终极目标是让等待不焦虑而不是让人盯着它研究原理。能把用户体验做舒服了技术细节反而退到幕后。希望你做的版本也能给自己的用户带来这样的体验。