纯css3波浪背景必须用radial-gradient拼波形+background-position位移+分层opacity动画组合；径向渐变可模拟无锯齿正弦轮廓，linear-gradient和clip-path动画易卡顿掉帧。
纯 CSS3 实现波浪起伏流动背景，**不依赖 SVG、Canvas 或 JS，完全可行，但必须用 radial-gradient 拼波形 + background-position 位移 + 分层 opacity 动画组合，缺一不可。直接套用网上“clip-path 波浪”或单层 linear-gradient 方案，90% 会卡顿、断层或动不起来。
为什么 radial-gradient 是唯一靠谱的纯 CSS 波形生成方式
因为只有径向渐变能通过两个错位圆心+极窄色停，模拟出连续、无锯齿的正弦轮廓；linear-gradient 只能做斜线或条纹，clip-path: polygon() 虽然直观，但动画时浏览器无法硬件加速其路径点，滚动中极易掉帧，且 iOS Safari 对 clip-path 动画支持极差。
关键拼接写法（注意 at 和百分比数值）：
background-image: radial-gradient(100% 57% at bottom, #2196F3 100%, transparent 100.5%), radial-gradient(100% 58% at top, #2196F3 100%, transparent 100.5%);
常见错误：
- 两个渐变的
at top/at bottom写反，导致波峰朝下或断开 - 色停用
100%和101%—— 浏览器渲染容错低，必须用100.5%这类亚像素值保证平滑衔接 -
background-size第一个值（宽度）没设小，比如写成100% 100%，结果波形拉成直线
background-position 动画必须配单位一致，否则跳帧
位移动画本质是让两个渐变图层水平错位滚动，形成“流动感”。但如果你的 background-size 用的是百分比（如 50% 100%），那么 background-position 的位移值也必须用百分比（如 0% 100% → -100% 100%）。混用 px 和 % 会导致浏览器反复重排，动画卡顿肉眼可见。
正确示例（配合上面的渐变）：
background-size: 50% 100%;
animation: wave-move 8s linear infinite;
@keyframes wave-move {
0% { background-position: 0% 100%; }
100% { background-position: -100% 100%; }
}
容易被忽略的点：
- 容器必须设
overflow: hidden，否则位移过程会漏出边缘黑边 - 别在同一个元素上同时加
transform: translateX()和background-position动画——触发重排，直接废掉性能 - 动画时长不能低于 5s，否则人眼会感知到“抽帧”，建议底层波浪用 12s，中层 8s，顶层 5s
多层波浪的 z-index 和 opacity 怎么配才不发虚
三层波浪不是简单叠 z-index: 1/2/3 就完事。真实可用方案是：每层用独立 <div>，都设 <code>position: absolute; bottom: 0;，然后靠 opacity 和动画时长制造远近错觉。如果强行用 z-index 控制层次，不同层动画节奏稍有偏差，边缘就会出现半透明重影（尤其在 Chrome 128+ 和 Safari 18）。
推荐参数组合：
- 底层：
opacity: 0.3; animation-duration: 12s;（慢、淡，模拟远处海平线） - 中层：
opacity: 0.6; animation-duration: 8s;（中速、中等浓度） - 顶层：
opacity: 0.9; animation-duration: 5s;（快、浓，突出近处浪花）
切记：所有层的 background-size 宽度值要一致（比如都用 50%），否则波长不匹配，叠加后会出现“波峰对不上”的诡异错位。
最易被忽略的调试顺序：先固定容器宽度（比如 width: 100vw），再调 background-size 的第一个值控制波长，最后微调两个 radial-gradient 的圆心百分比（57%/58%）来修正波峰高度——顺序反了，波形永远调不准。
