直接改 d 属性做波浪动画易卡顿，因频繁 dom 操作和重排；应固定路径、仅用 transform 平移，配合多层错频动画与 viewbox 响应式适配，并修复 safari 白边问题。
为什么直接改 d 属性做波浪动画容易卡顿
很多教程教你在 JS 里用 Math.sin() 动态拼接 d 字符串再赋值给 <path></path>，这会导致频繁 DOM 操作和重排。浏览器每帧都要解析新路径、重建渲染树，低端设备或长页面下明显掉帧。
真正稳的方案是：路径固定，只动 transform。复用同一段 <path></path>，靠 translateX() 平移制造“流动感”，GPU 加速直接生效。
- 别在
requestAnimationFrame里反复 setAttribute("d", ...) - 把波浪路径写死在 SVG 内，用
<use></use>复制多层，每层独立animation - 动画属性只用
transform和opacity，避开left、top这类触发布局的属性
viewBox 宽高比不匹配容器时波浪会被拉扁
常见错误是随便抄个 viewBox="0 0 1200 100"，但父容器宽度是 100vw，高度却由内容撑开——结果波浪横向被压缩或纵向被拉伸，弧度失真。
正确做法是让 viewBox 宽高比 ≈ 容器宽高比。比如底部装饰常用 1440×100（适配桌面），那容器就设 height: 10vh 或 min-height: 80px，再配合 preserveAspectRatio="none" 允许非等比缩放。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 别用固定像素写容器高度，响应式场景下用
vh或rem -
preserveAspectRatio="none"必须加，否则 Safari/Chrome 会强行保持比例，波形变矮胖 - 如果波浪要填满全宽但高度固定，直接设 SVG 的
width="100%"、height="auto"，靠 viewBox 控制逻辑尺寸
多层波浪动起来像“一块板”而不是真实海浪
只靠 animation-delay 错开播放时间，四层波浪还是同频同幅——看起来是整块布在抖，不是水纹叠涌。
真实错落感来自三要素独立：周期（animation-duration）、振幅（通过 scaleY() 或 y 偏移控制）、相位（animation-delay）。例如第一层快而浅，第三层慢而深，第四层加轻微倾斜模拟视角。
- 第一层：
animation: wave 8s linear infinite，fill-opacity: 0.7 - 第二层：
animation: wave 12s cubic-bezier(0.2, 0.8, 0.8, 0.2) infinite，y="2"，fill-opacity: 0.5 - 第三层：
animation: wave 20s linear infinite，transform: scaleY(0.6)，fill-opacity: 0.3 - 第四层：
animation: wave 25s ease-in-out infinite，transform: skewX(-1deg)
Safari 底部总有一像素白边漏出来
这不是路径没闭合，也不是 CSS 写错——是 Safari 渲染 SVG 底边时的光栅化误差。哪怕 <path></path> 画到 y=100，它仍可能在像素边界处留出 1px 缝隙。
最简解法：给 SVG 容器加 margin-bottom: -1px 或 bottom: -1px（取决于定位方式），同时确保 SVG 的 fill 和容器背景色完全一致，别指望“刚好盖住”。
- 别用
stroke模拟波浪边缘，Safari 描边抗锯齿更易露底 - 如果容器有圆角或阴影，先关掉测试，确认白边是否消失——有时是层叠顺序问题
- 移动端 Safari 更敏感，建议加
will-change: transform防闪烁，但仅对动画层加，别全局滥用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
