纯css实现波浪动画无需js或svg，核心是用两个错位radial-gradient拼接波形，配合background-position位移与opacity渐变动画，并通过分层div控制z-index、opacity及时长来模拟远近感。
直接用 background-image + background-position 动画就能实现，不需要 JS，也不必写多层 ::before/::after。关键在于控制渐变波形的位移和透明度衰减节奏，否则容易卡顿或显得“假”。
用 radial-gradient 拼出单条波浪线
不用 SVG 或 PNG，纯 CSS 画波形最轻量。核心是两个上下错位的 radial-gradient 拼接，形成连续起伏：
-
radial-gradient(100% 57% at bottom, #000 100%, #2196F3 100.5%)画下半段凸起 -
radial-gradient(100% 58% at top, #2196F3 100%, #000 100.5%)画上半段凹陷 - 用
background-position: 0 100%, 100% 100%对齐拼缝，避免断层 - 高度控制靠
background-size: 50% 100%，调小第一个值会让波峰更尖
让波浪动起来且透明度渐变
只平移 background-position 不够——它不带透明度变化。必须配合 opacity 动画，但不能直接作用在容器上（会整体变淡）。正确做法是：
- 把波浪层包进一个
div，设overflow: hidden - 给这个
div加animation: wave-move 8s linear infinite - 在
@keyframes wave-move里同时改background-position和伪元素的opacity - 例如：0% 时
background-position: 0 100%+opacity: 0.8；100% 时background-position: -100% 100%+opacity: 0.2
多层叠加时 z-index 和 opacity 的陷阱
常见错误是三层波浪全设 position: absolute 后，z-index 设成 1/2/3，结果动画不同步、边缘发虚。真实可用方案是：
- 每层波浪用独立
div，但都设position: absolute; bottom: 0 -
z-index只用来分层，别依赖它控制视觉深度；真正控制“远近感”的是opacity和动画时长 - 例如：底层波浪
animation-duration: 12s+opacity: 0.3，中层 8s + 0.6，顶层 5s + 0.9 - 绝对不要给同一层同时加
transform: translateX()和background-position，浏览器会触发重排
最易被忽略的是 background-size 和 background-position 的单位匹配问题：如果用百分比位移，background-size 也得用百分比；若混用 px 和 %，动画会跳帧。调参时先固定宽度再调高度，否则波形会拉扁或压扁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
