纯HTML无法实现动态波浪翻滚背景，必须依赖CSS动画（如clip-path+@keyframes或SVG path+stroke-dasharray）或JavaScript（Canvas动态绘制）来驱动波形变化与滚动效果。
纯 HTML 无法实现动态波浪翻滚背景；必须配合 CSS（尤其是 @keyframes 和 clip-path 或 SVG <path>）和/或 JavaScript 才能动起来。HTML 只负责结构容器，真正“翻滚”靠的是 CSS 动画驱动路径变化或 Canvas 绘制。
用 CSS clip-path + @keyframes 实现轻量波浪
这是最常用、兼容性较好（Chrome/Firefox/Safari 15.4+ 支持平滑动画）的方案，适合 banner 底部波浪遮罩。
- 核心是定义一个贝塞尔曲线波浪
clip-path，再用@keyframes动态偏移translateY()或修改cubic-bezier()控制点坐标（需配合path()函数，但目前仅 Safari 支持） - 更稳妥的做法：用两个错位叠加的波浪
div，各自用animation: wave 8s cubic-bezier(0.36,0.45,0.63,0.53) infinite，周期和相位差开，模拟滚动感 - 注意：不要直接在
body上用clip-path，会导致整个页面被裁剪；应包裹在固定尺寸的<div class="wave-container">内 - 示例关键片段：
.wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 150px; background: #4a90e2; clip-path: path('M0,100 C30,80 70,80 100,100 L100,150 L0,150 Z'); animation: wave 12s linear infinite; } @keyframes wave { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(-50%) translateY(0); } }
用 SVG <path> + CSS stroke-dasharray 模拟流动感
适合需要精细控制波形、或需适配深色/浅色主题的场景；比 clip-path 兼容性更好（IE11 都能跑）。
- 把波浪画成 SVG
<path d="M0,100 Q50,70 100,100 T200,100 ...">，然后用stroke-dasharray+stroke-dashoffset动画制造“水流过”的错觉 - 实际翻滚效果靠 JS 动态重绘
d属性更真实，但纯 CSS 方案只需让<path>在容器内横向平移即可：transform: translateX(-200px)配合infinite - 别忘了设
fill="none"和stroke="#4a90e2"，否则看不到线条 - 常见坑：
viewBox宽高没设对，导致波浪被压缩；preserveAspectRatio="none"必须加，否则响应式缩放时波形变形
用 Canvas + requestAnimationFrame 实现高性能真动态波浪
当需要多层波浪、鼠标交互（如悬停升高振幅）、或移动端流畅 60fps 时，Canvas 是唯一可靠选择。
立即学习“前端免费学习笔记（深入）”；
- 原理是每帧用
sin(x * frequency + time * speed)计算每个 x 坐标对应的 y 偏移，连点成线并填充 - 关键参数：振幅（
amplitude）、频率（frequency）、相位速度（speed），改一个就明显影响“翻滚节奏” - 避免踩坑：
canvas.width/canvas.height必须用getBoundingClientRect()动态读取，不能只靠 CSS 设置；否则高清屏下模糊 - 性能提示：用
ctx.clearRect()而非重绘整个背景；多层波浪用globalAlpha分层绘制，比叠加多个 canvas 更省资源
真正难的不是画出一条波浪，而是让它在不同屏幕宽度下保持比例、在滚动时自然衔接、且不触发 layout thrashing。多数人卡在 clip-path 的路径单位混乱，或 Canvas 中 time delta 计算不准导致动画卡顿——这些细节比“怎么写第一行代码”重要得多。
