可行，但仅适用于静态或低频变化的类波浪轮廓；本质是用圆角矩形+旋转+裁切实现视差遮罩，无法模拟真实流体的周期性位移与振幅变化。
用 border-radius + transform: rotate() 模拟波浪形背景是否可行
可行，但仅适用于静态或低频变化的“类波浪”轮廓，不是真正连续流动的水波。它的本质是用圆角矩形+旋转+裁切制造视差遮罩效果，视觉上像波浪起伏，但无法模拟真实流体的周期性位移和振幅变化。
典型适用场景：加载中状态提示、装饰性底部波浪边框、编辑器面板浮层过渡。不适用于需要精确控制波长/频率/相位的交互式水位进度条。
-
border-radius值越大，弧度越缓；组合不同值（如border-radius: 40% 60% 0 0）可生成非对称波峰 -
transform: rotate()需配合overflow: hidden容器，否则旋转后会溢出可见区 - 动画必须作用在遮罩层（如伪元素），而非背景本身；否则旋转会导致整个背景扭曲变形
为什么直接 rotate 背景图会失败
因为 background-image 不响应 transform，旋转的是元素盒子，不是图像内容。你看到的只是容器绕中心转了，背景仍平铺在原始坐标系里——结果是白屏或错位色块，不是波浪动效。
正确做法是把波浪做成独立的遮罩层（例如 ::before），用 border-radius 定义形状，再用 transform: rotate() 和 animation 控制其上下浮动或轻微扭转，从而让下方纯色/渐变背景“透出”波形区域。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层必须设
background-color: white或rgba(255,255,255,0.9)，不能透明，否则无遮挡效果 - 遮罩层高度要略大于容器，确保旋转时边缘不露底色
- 动画时间建议设为
8s–12s，太快显机械，太慢失去“流动感”
@keyframes 中 rotate 和 translateY 混用的坑
同时用 rotate() 和 translateY() 时，浏览器会按声明顺序合成变换矩阵。如果先写 rotate(0) 再写 translateY(-80%)，实际是“先转再移”；反过来则是“先移再转”，最终定位完全不同。
水波纹动画里常见错误：想让波峰上下浮动，却把 translateY 放在 rotate 后面，导致波形原地打转还偏移出界。
- 统一用
transform: translate(-50%, -70%) rotate(0deg)这种写法，确保基准点一致 - 百分比位移值（如
-70%）基于元素自身尺寸，不是父容器，所以遮罩层宽高必须固定或用vw/vh - 避免在 keyframes 中拆开写多个 transform 属性，CSS 只认最后一个生效
如何让波浪“随进度滚动”而不是原地呼吸
靠纯 border-radius + rotate 实现不了真正的横向滚动波浪——它没有水平位移分量。所谓“滚动感”，其实是用 background-position 移动线性渐变，再叠一层缓慢旋转的圆角遮罩，制造动态遮蔽错觉。
更务实的做法：放弃 rotate，改用 clip-path: polygon() 配合 animation 动态更新点坐标，或者直接上 SVG <path></path> + stroke-dasharray。前者兼容性好（Chrome/Firefox/Edge 104+），后者精度高、可控性强。
如果你坚持用 CSS，唯一能“滚动”的路径是定义一个超宽的 linear-gradient 背景（比如 background-size: 300% 100%），再用 background-position: 0% 50% → 100% 50% 动画——但这和 border-radius 无关，是另一套方案。
