不能用 rotate() 做波浪背景，因其使整条路径歪斜错位而非横向流动；正确做法是用 translatex() 平移 svg 路径实现无缝循环，配合多层错速位移与透明度衰减模拟真实海浪层次。
直接用 rotate() 做波浪背景会失真——它转的是整个元素，不是波形本身。真正能动起来的波浪，靠的是路径位移或裁剪区域平移，不是旋转。
为什么不能用 rotate() 动波浪
波浪是横向周期性起伏，不是绕中心点自转。对 SVG <path></path> 或伪元素应用 transform: rotate()，只会让整条线歪斜、错位，甚至翻转出界；视觉上像拧毛巾，而不是水流动。浏览器也不会把 rotate() 解释成“波峰向右推移”，它只按几何角度转动坐标系。
常见错误现象：
- 波形断裂、边缘露白，尤其在循环衔接处
- 动画过程中出现明显卡顿或跳帧（
rotate触发 layout + paint，非 GPU 加速） - 多层叠加时各层旋转中心不一致，层次感崩坏
正确做法：用 transform: translateX() 平移 SVG 路径
核心是让波形本身不动，而是“滚动视窗”——通过移动包含波形的容器或 <use></use> 实例，制造流动错觉。SVG 内部路径保持静态，只靠位移实现无缝循环。
实操要点：
- SVG
<path d="..."></path>必须设计为左右延展足够（例如宽度设为 2000px），避免重复时露底 - 用
<use xlink:href="#wave" x="0"></use>多次引用同一路径，不同x值控制起始位置 - 对每个
<use></use>或其父<:g>单独加animation: move 8s linear infinite -
@keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(-200px); } }—— 位移量必须等于波形一个完整周期的宽度（如 path 中M0,50 L200,50就取 -200px）
多层波浪如何配速与配色
真实海浪有前后景深度，CSS 层叠无法靠 z-index 模拟远近，得靠“错速位移 + 透明度衰减”来骗眼睛。
参数差异示例：
- 上层波：
fill: rgba(255,255,255,0.8)，动画时长4s，位移-180px（快+浅） - 中层波：
fill: rgba(255,255,255,0.5)，动画时长6s，位移-160px - 下层波：
fill: rgba(255,255,255,0.2)，动画时长10s，位移-140px（慢+深）
注意：所有层 SVG 的 viewBox 和路径周期要统一，否则错速后会出现相位偏移、断连。
容易被忽略的兼容性细节
Chrome 111+ 支持 clip-path: path("...") 动画，但 Safari 目前（2026 年 5 月）仍不支持 d 属性动画或 path() 关键帧。所以生产环境务必 fallback 到内联 SVG + <use></use> 方案。
关键检查点：
- SVG 必须 inline 写在 HTML 里（不能
background-image: url(...)），否则<use></use>无法跨文件引用 - 所有
<use></use>的fill值需显式声明，不能依赖继承（部分旧版 Firefox 不认） - 移动端需加
will-change: transform到动画元素，防 iOS Safari 掉帧
最简可用结构就是：一个 <svg></svg> 定义 <path id="wave"></path>，多个 <use></use> 分层引用并各自 animate —— 其他花哨写法，八成会在某个浏览器里静止不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
