严格意义上的纯 CSS 无限无缝波浪，只能靠 SVG 内联 + CSS 控制，且 SVG 必须内嵌在 HTML 中才能被 CSS 选中和动画化；path() 函数虽可简化路径定义，但仍需绝对坐标与首尾一致的贝塞尔曲线以保证无缝循环。
波浪动画必须用 SVG 还是 CSS 就够了？
纯 CSS 能实现，但「无缝循环」这个要求直接筛掉大部分 background-position + linear-gradient 的伪波浪方案——它们在周期衔接处必然有跳变。真正可行的是用 @keyframes 驱动一个带贝塞尔曲线的 clip-path 或 mask 动画，配合 SVG <path> 的 d 属性做形变，但后者已不算“纯 CSS”。所以结论是：**严格意义上的纯 CSS 无限无缝波浪，只能靠 SVG 内联 + CSS 控制，且 SVG 必须内嵌在 HTML 中才能被 CSS 选中和动画化**。
用 clip-path + path() 实现可调波浪的关键点
CSS 新增的 path() 函数（Chrome 120+、Safari 17.4+ 支持）让直接写 SVG 路径成为可能，这是目前最接近“纯 CSS”的解法。但要注意：
-
path()中的坐标必须是绝对值（如M0,50 Q25,30 50,50），不能用百分比或calc()，否则动画会失效 - 要无缝循环，波浪路径必须首尾 y 值一致、切线方向一致，推荐用重复的三次贝塞尔曲线段拼接，例如每 100px 宽度放一段
Q25,-10 50,0 Q75,10 100,0 - 动画必须作用于
clip-path的整个path()字符串，不能只动其中坐标——这意味着得用 JavaScript 动态生成关键帧，或用预设多段路径 +animation-timing-function: steps()模拟位移
兼容性妥协方案：内联 SVG + CSS transform 平移
如果目标浏览器包含旧版 Chrome 或 Firefox，更稳的做法是把波浪画成一个足够宽的 SVG <path>（比如宽度 600px，含 3 个完整波形），然后用 CSS transform: translateX() 循环平移它。要点如下：
- SVG
<path>的d属性必须保证左端点与右端点完全重合（x 相同、y 相同、导数相同），否则滚动时会出现撕裂 - 容器设
overflow: hidden，SVG 元素宽度设为实际波形宽度的 2–3 倍，动画从translateX(0)到translateX(-W)，再用animation-iteration-count: infinite - 别用
viewBox缩放 SVG，否则transform像素计算会失准；固定width和height，用preserveAspectRatio="none"避免拉伸变形
加载球整合时最容易漏掉的细节
把波浪套进圆形加载球里，不是简单叠加就能转起来：
立即学习“前端免费学习笔记（深入）”；
- 波浪元素必须用
position: absolute叠在球体上，且z-index高于背景但低于中心圆点，否则会被遮挡或盖住中间的“加载中”文字 - 波浪高度需按球直径比例缩放，比如球直径 80px，波浪振幅建议设为
8px～12px，太大显得浮夸，太小看不出动效 - 动画时长别设太短（
500ms以下），否则人眼无法识别波形流动；也别太长（>2s），否则加载感变迟滞；1.2s是较稳妥的起点 - 如果球体用了
border-radius: 50%，波浪容器必须同样设border-radius: 50%且overflow: hidden，否则波浪会从边缘溢出
真正难的不是画出波浪，而是让它的起点和终点在任意时间点都对得上——这需要反复调试贝塞尔控制点，或者接受 SVG 路径作为事实标准。一旦路径定稿，后续所有动画参数都是微调。
