用 ::before 和 ::after 做波纹填充，为什么位移后总露边？
核心问题不是动不起来，而是裁剪没对齐——overflow: hidden 必须加在进度条容器上，而不是父级或 body。很多同学把 overflow 加在 wrapper 里，结果波纹从外层“溢出”，看着像动画失控。
实际做法是：进度条本身（比如 .progress-bar）设 overflow: hidden，再让伪元素在里面平移。否则位移再精准也没用，背景图直接跑出可视区。
-
.progress-bar必须有明确宽高和position: relative -
::before设position: absolute，宽高设为容器的 200%~300%，保证位移时始终有足够背景可滚动 - 背景图用
linear-gradient+repeating-linear-gradient模拟波纹纹理，纯色渐变做不出流动感
波纹动效卡顿？检查 transform 和 will-change 的组合
CSS 动画卡顿八成是因为浏览器没走 GPU 加速。只写 left/top 位移必然掉帧，必须用 transform: translateX()；但光这样还不够，得告诉浏览器“这个元素要动”，否则首次触发仍会重排。
正确写法是给伪元素加 will-change: transform，且只在动画开始前加（可用 JS 切 class 控制），避免全局降级渲染性能。
- 禁止用
animation: move 3s infinite直接套在未声明will-change的伪元素上 -
translateX()的起始值建议用-50%而非0，让波纹从左边缘自然进入 - 动画时长别低于
2.5s，太快人眼识别不了“波纹”，太慢又显呆滞
不同浏览器下波纹断层？重点看 background-size 和 background-position 单位
Safari 对百分比背景定位支持不稳定，尤其配合 transform 时容易跳帧或错位；Chrome 和 Firefox 表现一致得多。根本原因是 Safari 解析 background-position: 0% 0% 时，会把百分比锚点算在伪元素自身尺寸上，而非容器。
解法很直接：统一用 px 或 rem 定义 background-size，并固定 background-position 为具体数值（如 -20px 0），再靠 animation 改变它。
- 别写
background-size: 200% 100%，改用background-size: 200px 20px（按实际波纹宽度定） - 动画关键帧里写
background-position: -200px 0→0 0，而不是0% → 100% - Firefox 下若仍有轻微闪烁，加
backface-visibility: hidden到伪元素
进度变化时波纹重置失败？别依赖 animation-play-state
很多人想让进度到 30% 时波纹也停在 30% 位置，于是监听进度值、切 animation-play-state: paused。这行不通——CSS 动画暂停后，background-position 不会“冻结”在当前计算值，下一帧可能回退或跳变。
真正可控的方式是：用 JS 动态设置 background-position 内联样式，把波纹位置和进度值做线性映射。动画只负责“流动感”，填充逻辑交给 JS 控制。
- 删掉所有
animation-play-state切换逻辑 - JS 中计算：
const pos = -(progress * waveWidth * 0.8)，然后el.style.backgroundPosition = `${pos}px 0` - 如果不想用 JS，只能接受波纹永远匀速动，和进度条数值异步——这是最轻量、最稳的方案
波纹效果真正难的不是动起来，而是让它在任意进度、任意缩放、任意设备下都不撕裂、不跳帧、不露底。大部分翻车都出在裁剪边界和背景定位的耦合关系上，调的时候盯着 overflow 和 background-size 这两个属性就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
