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