如何用纯CSS实现平滑的无限波浪起伏动效？-css教程-PHP中文网

能，但必须用SVG路径或双层渐变拼接，且background-position位移量严格等于波长；border-radius无法实现真实波浪动效，因它是静态弧线、不可控波峰波谷、不支持多层叠加、响应式失真；SVG方案最稳，需闭合路径、精确设置background-size与位移量，推荐ease-in-out缓动；双层radial-gradient仅适用于轻量场景；所有方案均需overflow:hidden裁切。

如何用纯css实现平滑的无限波浪起伏动效？

能，但必须用 SVG 路径或双层渐变拼接，且 background-position 位移量必须严格等于波长，否则会跳帧或断裂。

为什么不用 border-radius 模拟波浪

用 border-top-left-radius、border-top-right-radius 等组合出的“波形”本质是静态弧线，动画只能靠 transform: rotate() 或 translateX() 整体移动——视觉上是整块拱形在滑动，不是水波自然起伏。更关键的是：无法控制波峰/波谷位置、无法叠加多层、响应式缩放后弧度失真。实际项目中几乎没人用它做真正意义上的波浪动效。

SVG 波形 + background-position 是最稳方案

把波形定义为 SVG ，转义后塞进 background-image，再用 @keyframes 平移背景位置。这是目前兼容性最好、控制最精准的方式：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

波形路径必须闭合（起点和终点 y 值一致），否则衔接处露白
background-size 的宽度值（如 200px）就是波长，@keyframes 中 background-position 的位移量必须严格为 -200px，不能写 -100% 或估算值
推荐用 ease-in-out 缓动，比 linear 更接近水流惯性；时间设 4s–6s，太快显机械，太慢显迟滞

示例关键片段：

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'%3E%3Cpath d='M0,25 Q50,10 100,25 T200,25' fill='%2300bfff'/%3E%3C/svg%3E");<br>background-size: 200px 50px;<br>animation: wave 5s ease-in-out infinite;<br>@keyframes wave { 0% { background-position: 0 0; } 100% { background-position: -200px 0; } }

双层 radial-gradient 拼接适合轻量场景

不引入 SVG、纯 CSS 渐变也能凑出可用波浪，但调试成本高，只推荐用于加载指示器等对精度要求不高的地方：

两层 radial-gradient 分别模拟上凸波峰和下凹波谷，用 background-position 错开水平偏移（如一层 0 100%，另一层 100% 100%）
必须统一 background-size 宽度（如 400px 100px），否则两层波长不一致，动起来会“脱节”
颜色断点要留 0.5% 左右余量（如 #00bfff 99.5%），避免硬边导致闪烁
移动端需加 will-change: background-position 防止掉帧