1. 从“充电”这个动作说起：为什么水波特效比进度条更抓人

手机充电这个场景，大家每天都要经历至少一次。但你有没有注意过，绝大多数充电界面的视觉反馈就是一个电池图标加百分比数字，顶多再配一个闪电符号。功能上完全够用，可视觉上实在乏善可陈。我最早动这个念头，是因为给一个硬件产品做配套的网页端状态面板，需要展示设备充电中的状态。当时第一版用的是常规的环形进度条，测试的时候同事看了一眼说“像在下载文件”，这句话点醒了我——充电这个动作本身带有“能量注入”的物理联想，而水波扩散恰好能把这个联想具象化。

水波特效的核心视觉逻辑是：一个中心点持续向外扩散涟漪，涟漪的振幅和频率可以映射充电功率或电量百分比。相比进度条，它多了一层“动态生命力”的感觉。而且从技术实现角度看，用纯HTML加CSS做水波，不需要Canvas，不需要WebGL，不需要引入任何第三方库，一个<div>加几组@keyframes就能跑起来。这意味着它可以直接嵌入任何网页、任何小程序WebView、任何Electron壳里，兼容性极好。

这篇文章适合几类人看：一是前端新手，想找一个完整的、能跑起来的CSS动画案例来练手；二是有一定经验但没怎么碰过CSS动画的开发者，想了解多重动画叠加和性能优化的实际做法；三是做硬件配套界面、IoT面板、充电桩状态页的朋友，需要一个轻量但视觉效果在线的方案。我会从最基础的结构搭建讲起，一直讲到多层水波叠加、颜色映射、性能调优这些实战细节。代码全部可以直接复制使用，参数我会解释清楚每个值为什么这么设。

2. 水波特效的视觉拆解：到底在模拟什么物理现象

2.1 水面涟漪的三个视觉要素

要做出像样的水波效果，先得搞清楚真实水面涟漪长什么样。你往平静的水面扔一颗石子，会看到三个特征：第一，涟漪是从中心点向外扩散的同心圆；第二，越往外扩散，圆环越淡、越宽；第三，涟漪不是单一的一圈，而是连续多圈叠加，前一圈还没消失，后一圈已经出来了。

这三个特征对应到CSS里就是：同心圆用border-radius: 50%加transform: scale()实现扩散；越往外越淡用opacity从高到低过渡；多圈叠加用多个元素各自跑不同的animation-delay来实现相位差。理解了这个映射关系，后面写代码就是按图索骥。

很多人第一次做水波效果，只用一个圆环做缩放，结果看起来像“呼吸灯”而不是水波。问题就出在缺少多圈叠加和透明度衰减这两个关键细节上。我一开始也踩过这个坑，后来把三个圆环错开时间启动，效果立刻就不一样了。

2.2 充电场景对水波的特殊要求

普通的水波特效可以随便扩散、随便变色，但充电场景有几个额外约束。首先，水波的中心通常要跟电池图标或充电图标对齐，不能偏；其次，水波的颜色需要跟充电状态联动——充电中一般是绿色或蓝色系，充满可能是另一种颜色，异常状态可能是红色；第三，水波的节奏要跟充电功率有某种感知上的关联，快充时涟漪扩散快，慢充时扩散慢。

这些约束意味着水波特效不能只是一个独立的装饰元素，它需要跟页面上的状态数据绑定。好在CSS变量（--var）可以很方便地做到这一点，后面我会具体讲怎么用JS动态改CSS变量来控制水波的颜色和速度。

2.3 为什么不用Canvas或SVG

这个问题我被问过好几次。Canvas做水波当然可以，而且能做更复杂的波形计算，但代价是你需要写渲染循环、处理设备像素比、管理画布尺寸变化。SVG的<animate>也能做，但SMIL规范在现代浏览器里的支持态度一直暧昧。CSS方案的优势在于：声明式、零JS渲染开销、天然支持硬件加速、响应式适配几乎不用额外写代码。对于充电状态这种相对简单的视觉需求，CSS方案是性价比最高的选择。

当然CSS方案也有边界。如果你要做的是那种带折射、带倒影、带交互点击波纹的复杂水波，那还是得上Canvas。但对于“充电中”这个场景，CSS完全够用，而且代码量少到可以贴在一张便签上。

3. 从零搭建：HTML骨架与CSS水波核心代码

3.1 最小可运行结构

先看HTML部分。整个结构非常简洁，一个外层容器负责定位，内部放三个水波圆环和一个中心图标：

<div class="charging-wave"> <div class="wave-ring"></div> <div class="wave-ring"></div> <div class="wave-ring"></div> <div class="center-icon"> <svg><!-- 充电图标 --></svg> </div> </div>

三个wave-ring就是三层水波。为什么是三个而不是两个或四个？两个的话叠加感不够，看起来还是像呼吸灯；四个以上在低端设备上会出现明显的合成开销，而且视觉上过于密集反而显得脏。三个是一个经过实测的平衡点，既有层次感又不至于性能吃紧。

3.2 圆环的初始状态与关键帧设计

CSS部分先定义圆环的基础样式：

.charging-wave { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; } .wave-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--wave-color, #4ade80); opacity: 0; transform: scale(0.3); animation: waveExpand 3s ease-out infinite; }

这里有几个关键决策需要解释。border-radius: 50%把方块变成圆，这是最基础的。border而不是background，是因为水波是环状的，中间要透出下面的内容。opacity: 0和transform: scale(0.3)是初始状态，动画开始前圆环不可见且缩小。

animation那行里的3s是单次扩散周期，ease-out让扩散速度先快后慢，模拟水波遇到阻力减速的物理感，infinite让它无限循环。这三个值都可以根据充电功率动态调整，后面会讲。

关键帧定义：

@keyframes waveExpand { 0% { transform: scale(0.3); opacity: 0.8; border-width: 3px; } 100% { transform: scale(1.5); opacity: 0; border-width: 1px; } }

注意border-width也在变化，从3px渐变到1px。这个细节很多人会忽略，但它模拟的是水波扩散时能量分散、波峰变矮的物理过程。加上这个变化之后，水波的“消散感”会真实很多。

3.3 三层圆环的相位差控制

三个圆环如果同时启动，看起来就是一个环在动。要让它们错开，用animation-delay：

.wave-ring:nth-child(1) { animation-delay: 0s; } .wave-ring:nth-child(2) { animation-delay: 1s; } .wave-ring:nth-child(3) { animation-delay: 2s; }

因为周期是3s，所以三个圆环分别延迟0s、1s、2s，刚好把3s的周期三等分。这样任意时刻都有一个圆环在扩散的早期、一个在中期、一个在末期，视觉上就是连续不断的水波。这个延迟值的计算逻辑是：延迟间隔 = 动画周期 / 圆环数量。如果你改成四个圆环，周期3s，那延迟就应该是0s、0.75s、1.5s、2.25s。

注意：animation-delay只影响第一次启动的时机，后续循环会保持这个相位差。所以不需要担心循环几次之后相位会乱掉。

4. 让水波“活”起来：颜色映射、速度联动与状态切换

4.1 用CSS变量打通JS与动画的通道

硬编码颜色的水波只能看不能用。实际项目里，水波颜色需要根据充电状态变化。最优雅的做法是用CSS自定义属性（CSS Variable）作为中间层：

:root { --wave-color: #4ade80; --wave-duration: 3s; } .wave-ring { border-color: var(--wave-color); animation-duration: var(--wave-duration); }

JS只需要改document.documentElement.style.setProperty('--wave-color', newColor)，所有圆环的颜色就同步变了。速度同理，改--wave-duration就能控制扩散快慢。这种做法的好处是动画本身不需要重启，CSS变量变化会被浏览器自动应用到正在运行的动画上，过渡非常平滑。

4.2 充电功率到动画速度的映射

假设你的充电功率范围是5W到65W，希望水波周期从4s（慢充）逐渐加快到1.5s（快充）。这是一个线性映射问题：

duration = 4 - (power - 5) / (65 - 5) * (4 - 1.5)

化简后：

duration = 4 - (power - 5) / 60 * 2.5

当power=5时，duration=4s；当power=65时，duration=1.5s。这个映射不是物理精确的，但感知上足够合理。实际使用时可以加一个clamp防止极端值：

function updateWaveSpeed(power) { const minPower = 5, maxPower = 65; const minDur = 4, maxDur = 1.5; const clamped = Math.min(Math.max(power, minPower), maxPower); const duration = minDur - (clamped - minPower) / (maxPower - minPower) * (minDur - maxDur); document.documentElement.style.setProperty('--wave-duration', duration + 's'); }

4.3 不同充电状态的视觉区分

充电中、充满、异常三种状态，水波应该有不同的表现：

充满状态把周期拉长到5s，是因为“充满”意味着能量注入停止，水波应该逐渐平息而不是继续活跃。异常状态加快到1s并叠加一个轻微的translateX抖动，是为了引起用户注意。这些状态切换只需要改CSS变量加一个class：

.charging-wave.state-full { --wave-color: #60a5fa; --wave-duration: 5s; } .charging-wave.state-error { --wave-color: #f87171; --wave-duration: 1s; animation: shake 0.3s ease-in-out infinite; }

5. 性能与兼容性：那些文档里不会写的实测经验

5.1 用transform和opacity保住合成层

CSS动画性能有一条铁律：只动画transform和opacity，不要动画width、height、top、left。因为前两者可以由GPU合成器直接处理，不触发重排和重绘；后两者会触发layout，在低端设备上直接掉帧。

我的水波代码里，扩散用的是transform: scale()，透明度用的是opacity，边框宽度虽然也变了（border-width），但这个变化很微小且圆环本身不大，实测在中端手机上仍然能保持60fps。如果你特别在意性能，可以把border-width的变化去掉，只保留scale和opacity，视觉上差异不大。

另外建议给圆环加上will-change: transform, opacity，提前告诉浏览器这个元素要动画，让它提前提升为合成层：

.wave-ring { will-change: transform, opacity; }

但注意不要滥用will-change，每个圆环都加会占用额外显存。三个圆环的量级完全没问题，但如果页面上有几十个这样的组件，就要考虑按需添加了。

5.2 低端设备上的降级策略

我在一台老旧的安卓平板上测试时发现，三个圆环同时跑动画会出现肉眼可见的卡顿。解决方案是加一个媒体查询，在小屏幕或低性能设备上减少圆环数量：

@media (max-width: 480px) { .wave-ring:nth-child(3) { display: none; } }

或者用prefers-reduced-motion尊重用户的系统设置：

@media (prefers-reduced-motion: reduce) { .wave-ring { animation: none; opacity: 0.3; transform: scale(1); } }

这个媒体查询很重要，有些用户因为前庭功能障碍会对持续动画感到不适，系统层面开启了“减少动态效果”。作为开发者，尊重这个设置是基本的职业素养。

5.3 圆环尺寸与容器比例的坑

最开始我把圆环的width和height设成固定像素值，结果在不同尺寸的容器里要么溢出要么太小。后来改成百分比：

.wave-ring { width: 100%; height: 100%; }

但这里有个细节：如果容器不是正方形，border-radius: 50%会变成椭圆。所以外层容器必须用aspect-ratio: 1或者用padding技巧锁死正方形。我推荐用aspect-ratio，现代浏览器支持已经很好：

.charging-wave { width: min(200px, 60vw); aspect-ratio: 1; }

这样容器在任何屏幕上都保持正方形，圆环也不会变形。

6. 进阶玩法：让水波承载更多信息

6.1 水波颜色随电量百分比渐变

除了按状态切换颜色，还可以让颜色随电量平滑过渡。比如从红色的低电量渐变到绿色的高电量。用HSL色彩空间做插值比RGB更自然：

function batteryColor(percent) { const hue = percent * 1.2; return `hsl(${hue}, 70%, 55%)`; }

percent为0时hue为0（红色），percent为100时hue为120（绿色）。中间经过黄色和青绿色，过渡非常顺滑。把这个颜色赋给--wave-color，水波就会随着充电进度慢慢从红变绿，视觉反馈比数字百分比直观得多。

6.2 用多层圆环模拟“脉冲”效果

如果你想要更强烈的“能量注入”感，可以在三层水波之外再加一个实心圆做脉冲。实心圆的动画跟水波相反：从大变小，从透明变不透明，然后再消失。这样一扩一收，节奏感更强：

.pulse-core { position: absolute; width: 40%; height: 40%; border-radius: 50%; background: var(--wave-color); opacity: 0; animation: pulseIn 3s ease-in-out infinite; } @keyframes pulseIn { 0%, 100% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.1); opacity: 0.3; } }

这个脉冲圆的周期跟水波保持一致，但相位错开，形成“水波扩散出去、能量脉冲收回来”的循环。

6.3 与真实充电数据联动的完整示例

把前面所有片段串起来，一个完整的联动逻辑大概长这样：

const waveEl = document.querySelector('.charging-wave'); function onChargingUpdate(data) { const { power, percent, status } = data; // 更新颜色 const color = status === 'error' ? '#f87171' : status === 'full' ? '#60a5fa' : batteryColor(percent); document.documentElement.style.setProperty('--wave-color', color); // 更新速度 if (status === 'charging') { updateWaveSpeed(power); } else if (status === 'full') { document.documentElement.style.setProperty('--wave-duration', '5s'); } else { document.documentElement.style.setProperty('--wave-duration', '1s'); } // 更新状态class waveEl.className = 'charging-wave state-' + status; }

这段代码假设你有一个onChargingUpdate被定时调用，数据来源可以是WebSocket、轮询API或者本地硬件接口。核心思路就是把数据映射到CSS变量，让CSS动画自己去跑，JS不参与每一帧的渲染。

7. 我踩过的几个坑和对应的解法

第一个坑是圆环的border在缩放时会出现锯齿。原因是transform: scale()放大了一个细边框，浏览器没有做抗锯齿处理。解法是给圆环加一个极小的box-shadow做柔化，或者把border换成outline加outline-offset。我最终用的是box-shadow: 0 0 0 1px var(--wave-color)代替部分边框，效果更柔和。

第二个坑是多个圆环在Safari上会出现闪烁。这是Safari对will-change和合成层的处理跟Chrome不同导致的。解法是给外层容器加transform: translateZ(0)强制开启硬件加速，闪烁就消失了。

第三个坑是动画在页面切到后台再切回来时会“跳帧”。因为浏览器会暂停后台页面的动画，切回来时动画时间轴已经跑了一大截。解法是监听visibilitychange事件，在页面重新可见时重置动画：

document.addEventListener('visibilitychange', () => { if (!document.hidden) { document.querySelectorAll('.wave-ring').forEach(el => { el.style.animation = 'none'; el.offsetHeight; // 强制重排 el.style.animation = ''; }); } });

这个技巧在需要长时间展示充电状态的页面上特别有用，不然用户切回来会看到水波“卡”了一下。

8. 这套方案适合嵌到哪些实际场景里

除了手机充电界面，这套水波特效还可以用在几个地方。一是无线充电板的配套App，水波从中心扩散的视觉隐喻跟电磁感应加热的物理过程很契合。二是电动车充电桩的状态屏，大屏上跑水波比跑进度条更有科技感。三是智能手表的充电表盘，小尺寸下三个圆环刚好能塞进圆形表盘里。四是任何需要表达“能量流动”的界面，比如电池健康度检测、电源管理面板。

代码量方面，HTML加CSS加JS全部算上不到150行，压缩后大概2KB。没有任何外部依赖，不挑框架，React、Vue、原生页面都能直接嵌。如果你正在做类似的项目，可以直接把上面的代码片段拿去用，参数按自己的品牌色和功率范围调一下就行。