纯CSS无法实现字符级波浪起伏动画，因offset-path仅支持整块元素沿路径移动，不支持单字符独立定位与错峰动画；必须用SVG的textPath配合tspan逐字控制。
纯 CSS 实现文字波浪起伏动画，**不依赖 SVG path 布局（即让文字沿真实贝塞尔曲线排列再动画），就必须引入 SVG —— 因为 CSS 本身没有 path 布局能力，offset-path 虽支持路径，但对文字逐字定位、错峰起伏的控制力极弱，且兼容性差（Chrome 仅部分支持，Firefox/Safari 不支持）。
为什么不能只用 CSS offset-path + animation 做波浪文字？
offset-path 只能控制一个元素整体沿路径移动，无法让「每个字符」独立锚定在路径不同位置并叠加 translateY 动画。常见错误是把整段文字包进一个 <span>，然后加 offset-path: path('M0,0 C50,-20 150,-20 200,0'); —— 结果是整行字像坐过山车一样平滑滑过曲线，不是“波浪起伏”，而是“平移抖动”。更糟的是，offset-distance 动画和 transform: translateY() 在同一元素上叠加时，浏览器合成行为不可控，容易位移错乱或掉帧。
-
offset-path在 Safari 和 Firefox 中完全不生效，Edge 84+ 仅实验性支持 - 即使 Chrome 支持，
offset-distance无法与animation-delay配合实现“错峰”——所有字符共用同一个距离值 - 路径长度需手动计算匹配文字宽度，响应式下极易错位；
getTotalLength()无法在纯 CSS 中调用
真正可用的 path 布局方案：SVG +
要让文字严格贴合自定义波浪路径（比如正弦曲线、海浪轮廓），必须用 SVG 的 <textPath>。核心是：先定义 <path>，再用 <text> 内嵌 <textPath> 引用它，最后通过 JS 或 CSS 控制每个字符的 startOffset 和独立动画。
- HTML 中需内联 SVG，不能外链 —— 外链
<use>会丢失<textPath>的 DOM 可操作性 - 路径建议用
d="M0,0 Q50,-15 100,0 T200,0"这类平滑贝塞尔，避免尖角导致文字折断 - 每个字符需单独包裹为
<tspan>，并设dy微调垂直对齐（因<textPath>默认基线对齐，波浪顶点处易上浮） - 动画靠 JS 控制
tspan.setAttribute('dy', value)或 CSS 自定义属性 +@keyframes驱动transform，而非改startOffset（它只影响起始位置，不负责起伏）
字符拆分 + path 定位 + 独立 translateY 的最小可行代码
以下为可直接运行的精简结构（省略了路径生成逻辑，聚焦关键控制点）：
立即学习“前端免费学习笔记（深入）”；
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="wave" d="M0,50 C60,30 140,70 200,50 S300,50 300,50" fill="none"/>
</defs>
<text font-size="24" fill="#333">
<textPath href="#wave" startOffset="0%">
<tspan dx="0" dy="0" style="--i:0;">W</tspan>
<tspan dx="1em" dy="0" style="--i:1;">a</tspan>
<tspan dx="2em" dy="0" style="--i:2;">v</tspan>
<tspan dx="3em" dy="0" style="--i:3;">e</tspan>
</textPath>
</text>
</svg>
<p><style>
tspan {
display: inline-block;
animation: wave-raise 2s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.08s);
}
@keyframes wave-raise {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
</style>注意：dx 是手动模拟字符间距，实际项目中应通过 JS 拆分字符串并动态设置 dx 累加值；dy="0" 需根据路径曲率微调，否则波峰处文字会“悬空”。
移动端与性能临界点必须盯住这三点
用 SVG <textPath> 做波浪文字，比纯 CSS 方案 DOM 节点更多、渲染路径更长，低端 Android 设备上 12 个字符就可能触发重排卡顿。
- 路径
<path>的d属性尽量简化，避免超过 3 个控制点的复杂贝塞尔（C或S命令） - 禁用
will-change: transform在tspan上 —— SVG 元素对该声明响应极差，反而增加内存开销 - 如需响应式，别用
viewBox缩放 SVG 整体，而应 JS 监听resize后重绘d属性（用getBBox()获取当前宽度再重算坐标）
真正难的不是写出第一版波浪，而是让第 15 个字符在千元机上也保持 60fps —— 这需要你亲手测过真机，而不是只看 Chrome DevTools 的帧率面板。
