SVG动态波浪背景采用多层路径+CSS位移动画+错速叠加，不依赖JS；通过贝塞尔曲线绘制无缝波形，用<use>复用并设不同动画时长与延迟，结合透明度、模糊、缩放及CSS变量实现层次感和响应式适配。
网页端用 SVG 做动态波浪背景，核心是“多层 SVG 路径 + CSS 位移动画 + 层级错速叠加”，不依赖 JS，性能好、缩放无损、适配性强。
准备可平铺的波浪路径
先定义一条左右延展足够、首尾能无缝衔接的波浪 <path>。推荐用二次贝塞尔（Q）或三次贝塞尔（C）绘制，确保起点和终点 y 值一致、斜率连续：
- 宽度建议设为 200–400px（一个完整波形周期），方便后续 translateX 精确控制循环位移量
- 路径末尾要闭合到底边（如
v40 h-400 z），形成可填充的水体形状 - 避免使用 rotate、scale 等破坏波形方向的变换；只靠
translateX滚动才自然
用 <use> 复制多层并独立动画
把波浪路径定义为 <defs> 中的 <path id="wave">，再用多个 <use> 引用它，每层设置不同参数：
- 给每层
<use>单独加 class，例如.wave-1、.wave-2 - 用 CSS
@keyframes定义位移动画，位移值 = 波形周期宽度（如 -320px） - 各层设不同
animation-duration（如 8s / 5s / 3s）和animation-delay（如 -1s / -3s / -5s），制造错峰流动感
控制视觉层次与响应式
真实海浪有远近、深浅、透光差异，CSS 变量可统一管理这些维度：
- 用
fill-opacity控制透明度：前景层高（0.9），中景中（0.6），远景低（0.3） - 用
filter: blur(0.5px)或轻微transform: scale(0.99)模拟远景虚化 - 配合
calc(var(--height, 0) * 1vh)动态设置高度，实现视口高度自适应 - 在媒体查询中调整
animation-duration和--height，小屏减慢、压低，防卡顿
嵌入页面并定位到底部
将 SVG 容器作为绝对定位元素置于页面最底层：
- 父容器设
position: relative; overflow: hidden; - SVG 元素设
position: absolute; bottom: 0; left: 0; width: 100%; height: 20vh; - 关键：加
transform: translateZ(0)或will-change: transform，启用 GPU 加速 - 若需遮挡内容边缘，可在 SVG 上叠一层半透明白色
<rect>或用mask
