伪元素+border-radius旋转实现的波浪进度条本质是旋转椭圆遮罩，存在拉伸、露白、边缘发软等问题；需用相位差动画、分层透明色和双维度css变量控制高度与露出位置，并在复杂需求时转向clip-path或svg方案。
伪元素 + border-radius 旋转做波浪进度条，能用，但不是真波浪——它本质是“旋转的椭圆盖在矩形上”，视觉上会拉伸、露白、边缘发软。想稳定上线，得接受它的物理限制，而不是硬调参数去骗眼睛。
为什么::before和::after旋转后像果冻抖动
因为border-radius: 45% 20%定义的是一个椭圆边框，而transform: rotate()作用在整块矩形元素上。浏览器先画椭圆，再旋转整个盒子，导致圆角锚点被拉扯变形，尤其在旋转角度 > ±12° 或容器宽高比不固定时，底部衔接处直接撕裂或露白。
- 父容器必须设
overflow: hidden，否则伪元素旋转后会溢出边界 -
border-radius双值写法（如50% 15%）依赖宽高比，响应式布局中容易塌缩成尖角或扁平弧线 - iOS Safari 15.6 之前版本对
rotateZ()渲染模糊，动画卡顿明显
怎么让旋转波浪看起来更自然
放弃“纯弧线”幻想，转而控制变形节奏和遮罩关系。两个伪元素不是为了叠加出波峰波谷，而是靠错位动画制造流动错觉。
- 用
transform: translateX(-50%) rotate(0deg)起始，避免初始偏移 - 主波浪（
::before）用animation-duration: 8s，次波浪（::after）用12s并加animation-delay: -4s，形成相位差 - 颜色用
rgba(255,255,255,0.3)和rgba(255,255,255,0.7)分层，别用纯白，否则叠在一起变实心 - 动画曲线改用
cubic-bezier(0.34, 1.56, 0.64, 0.4)，比linear更有水的弹性感
进度控制不能只靠bottom位移
很多教程用 bottom: calc(100% - var(--progress)) 控制露出高度，但这只影响垂直裁剪位置，无法联动波浪起伏幅度。实际项目中，进度变化时波浪应同步“抬升+收缩”，否则看着像水位上涨但水面不动。
- 把进度值映射到两个维度：
--wave-height控制伪元素height（影响波峰高度），--wave-offset控制bottom（影响露出区域） - JS 动态设置 CSS 变量时，务必用
element.style.setProperty('--wave-height', `${val}px`)，避免重排 - 移动端慎用
will-change: transform，部分 Android WebView 会引发渲染残留
真正难的不是写出动画，而是判断什么时候该换方案：如果需要精确波形、支持任意进度暂停、或要适配深色模式下透明度变化，就该切到 clip-path 或 SVG path 动画——伪元素旋转这条路，适合快速验证和轻量加载场景，别把它当万能解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
