纯css波浪进度条核心是用clip-path裁剪或background层叠模拟波浪，推荐兼容性更好的双层渐变方案：底层控制填充高度，上层用skewy倾斜的repeating-linear-gradient制造起伏涌动效果。
用 clip-path + @keyframes 实现波浪形进度动画
纯 CSS 波浪进度条的核心不是靠 SVG 或 Canvas，而是用 clip-path 切出波浪轮廓，再用位移动画模拟起伏。关键在于：波浪必须是「可重复平铺的贝塞尔曲线」，否则动画会撕裂。
常见错误是直接用 radial-gradient 模拟波浪——它只能做静态渐变，无法随进度动态裁剪高度；也有用 background-position 移动线性渐变的，但边缘生硬、无起伏感。
- 波浪路径推荐用
inset(0 0 100% 0 round 0 0 50% 50%)起手，但真正可控的是path()函数（需 Chrome 120+ / Safari 17.4+） - 更兼容的做法：用两个叠加的
linear-gradient层，上层画波浪纹（repeating-linear-gradient+transform: skewY(-10deg)），下层控制填充高度 - 动画必须作用在
transform: translateY()上，不能动clip-path本身——后者触发重排，卡顿明显
background 层叠方案：兼容性好且易控进度
这个方案在 IE11 以外的所有现代浏览器都稳，且能用 JS 直接改 background-size 控制进度百分比。
原理是：底层用 linear-gradient 做主色块，上层用带角度倾斜的重复渐变模拟波峰波谷，再通过 background-position 的 Y 轴偏移制造「涌动」错觉。
- 波浪密度由
repeating-linear-gradient的色标间距决定，例如to bottom, #fff 0%, #fff 2px, transparent 2px, transparent 4px - 起伏幅度靠
skewY()角度和background-size的 y 值配合，比如background-size: 100% 20px配skewY(-8deg) - 进度控制本质是缩放底层渐变高度：
background: linear-gradient(#4a90e2, #4a90e2) 0 / 100% ${percent}%，注意这里${percent}%是 JS 注入值
JS 动态注入进度时别忽略 transition 的 timing-function
直接设 element.style.backgroundSize = '100% ' + percent + '%' 会突变，必须加过渡。但用 ease-in-out 会让波浪「先慢后快再慢」，失去真实涌动感。
- 推荐用
cubic-bezier(0.34, 1.56, 0.64, 1)—— 这个值能让上升段有初速度，顶部稍缓，模拟水体惯性 - 如果用
clip-path方案，transition必须写在clip-path后面，且不能省略单位（即使写none也要写成clip-path: inset(0); transition: clip-path 0.6s cubic-bezier(...)） - 移动端要注意：iOS Safari 对
clip-path的path()动画支持不稳定，建议降级为background方案
响应式下波浪变形？优先锁定 background-size 的 y 值
很多实现一缩放就波浪拉扁或挤成锯齿，问题出在 background-size 的第二个值（高度）被设成了百分比或 auto，导致随容器宽高比变化而失真。
- 固定波长：把波浪层的
background-size设为200px 40px（宽高都定死），再用background-position: 0 calc(100% - ${offset}px)控制涌动位置 - 容器尺寸变化时，只更新底层填充高度（
background-size: 100% ${fillHeight}px），上层波浪层保持200px 40px不变 - 如果必须适配极小屏，用
@container查询（需开启 container queries）比媒体查询更精准，避免波浪在 320px 宽度下被压缩到不可识别
波浪的「动」不在形状变化，而在视觉节奏——同一套贝塞尔参数，在不同设备上微调 animation-duration 和 background-position 偏移步长，比强行重绘路径更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
