纯css波浪动画应使用transform+@keyframes实现位移循环，避免top/left触发重排；需设overflow:hidden裁切、多层错开duration/delay、z-index配合opacity/translatey模拟景深，并用clip-path或scaley控制加载高度。
纯 CSS 实现加载中的波浪动画，关键不在“定位”本身，而在于用 transform + @keyframes 驱动位移循环，再配合 overflow: hidden 和层叠控制视觉裁切——position 仅用于建立相对/绝对上下文，滥用 top/left 动画会触发重排，卡顿明显。
为什么别用 top 或 left 做波浪位移
浏览器对 transform（尤其是 translateX）做了 GPU 加速，而 top/left 改变会强制触发 layout（重排），尤其在移动端或低端设备上帧率骤降。实测同一波浪动画：用 transform: translateX() 能稳 60fps；换成 left: -100px 后，iPhone SE 上掉到 32fps 且有明显跳帧。
常见错误现象：
- 波浪抖动、不连贯，尤其在 Safari 中更明显
- 动画开始/结束处有“顿挫感”，不像水面自然流动
- 滚动页面时波浪突然暂停或错位
@keyframes 波浪循环必须用 translateX(-100%)
要实现无缝滚动效果，关键不是“动多少像素”，而是让动画终点和起点视觉对齐。用百分比位移可适配任意容器宽度，避免硬编码导致响应式失效。
正确写法示例：
@keyframes wave-slide {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
要点：
- 动画元素的
width至少设为200%，否则位移后露出空白 - 父容器必须设
overflow: hidden，否则看到平移全过程 - 若用多个波浪层（如深浅两层），每层
animation-duration和animation-delay要错开，否则叠在一起就成一条直线
四层波浪叠加时，z-index 和 opacity 的配比逻辑
真实海浪有远近层次：近处浪高、清晰、不透明；远处浪低、模糊、半透。纯靠 z-index 不够，必须配合 opacity 和垂直偏移 transform: translateY() 模拟景深。
典型配置（从下到上）：
- 底层：
z-index: 1,opacity: 0.3,transform: translateY(5px), 动画最慢（8s） - 中层：
z-index: 2,opacity: 0.5,transform: translateY(3px),6s - 上层：
z-index: 3,opacity: 0.7,transform: translateY(1px),4s - 顶层（高光）：
z-index: 4,opacity: 1,transform: none,2s
注意：z-index 只在定位元素（position: relative/absolute）上生效；如果忘了给某层加 position: relative，z-index 直接被忽略。
加载状态下的波浪，如何控制“起始高度”模拟进度
加载动画里的波浪不是固定高度，需随进度上升。不能靠 JS 改 height（会重排），推荐两种轻量方案：
- 用
clip-path: inset(calc(100% - Xpx) 0 0 0)，X 是当前加载高度，只裁剪上部，保留波浪底部流动 - 把波浪容器包在另一个
overflow: hidden父容器里，用transform: scaleY()缩放整个波浪组——性能好，但要注意transform-origin: bottom，否则缩放中心错位
最容易被忽略的一点：所有波浪层的 transform 必须统一用 transform: translateX() translateY() scaleY() 合并书写，不要拆成多行 transform 声明，否则后者会覆盖前者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
