CSS波浪动画核心是background-image配合background-position位移与@keyframes循环：1.纯CSS可用线性+径向渐变拼出单层波形；2.推荐SVG路径实现精准波形；3.位移量须等于波长以保证无缝；4.多层叠加可增强层次感。
用 CSS 实现波浪动画，核心是利用 background-image（通常是 SVG 或渐变绘制的波形）配合 background-position 的水平或垂直位移，再通过 @keyframes 控制循环移动，形成流动感。关键在于波形路径要闭合、位移方向与波形周期匹配，否则会出现跳变或断裂。
1. 用线性渐变 + 径向渐变拼出单层波形
不依赖外部图片，纯 CSS 绘制简单正弦波轮廓：
- 用多个
radial-gradient模拟波峰波谷，叠加在linear-gradient背景上 - 确保波形宽度（如 200px）和背景尺寸一致，方便后续平铺或位移
- 示例片段：背景设为
background: linear-gradient(#4facfe 50%, #00f2fe 50%);，再叠一层径向渐变模拟波顶
2. 使用 SVG 波形作为 background-image（推荐）
更精准可控，适合复杂波浪（如双层、起伏幅度大）：
- 写一个 inline SVG，
<path d="M0,50 Q50,20 100,50 T200,50"></path>描出平滑波形路径 - 转义后作为
url("data:image/svg+xml,...")放入background-image - 设置
background-size: 200px 100px;（波长×高度），background-repeat: repeat-x;
3. 用 @keyframes 控制 background-position 循环移动
让波“动起来”的核心步骤：
立即学习“前端免费学习笔记（深入）”；
- 动画只需改变
background-position-x（或background-position两个值） - 位移量必须等于波形宽度（如
200px），才能无缝衔接；例如：0% { background-position: 0 0; } 100% { background-position: -200px 0; } - 加上
animation: wave 3s ease-in-out infinite;，时间越长越舒缓，ease-in-out让起伏更自然
4. 叠加多层波实现深度感（可选进阶）
真实波浪常有前后两层，速度/幅度不同：
- 用
background简写叠加两层 SVG 或渐变波形，如：background: url(...), url(...); - 分别设置不同
background-size和background-position动画，第二层动画时长略长（如 4s）、位移略慢（如 -180px） - 上层波用浅色+快速，下层用深色+缓慢，视觉上更有层次和流动节奏
不复杂但容易忽略细节：波形宽度必须和 background-position 位移量严格一致，否则循环会卡顿；SVG 中路径需闭合或左右延展足够，避免边缘露白。
