必须将文字拆分为独立span并设display:inline-block，否则transform无法按字符索引产生相位差；配合animation-delay差值0.06s–0.08s、white-space:nowrap及letter-spacing与margin抵消，才能实现连贯波浪效果。
为什么直接给文字容器加 animation 会失败
所有字符同步上下跳，像抽搐而不是波浪——这是因为 CSS 动画作用于整个盒模型，transform: translateY() 无法按字符索引产生相位差。波浪的本质是「空间错开 + 时间延迟」，必须让每个字符成为独立可动画的元素，否则浏览器根本不知道该对哪个位置做延迟。
必须用 display: inline-block 的真实原因
不设这个声明，transform 在部分浏览器（尤其是 Safari 和旧版 Edge）中压根不生效；就算生效，inline 元素默认没有自己的盒模型，多个字符容易重叠或换行错位，导致波形被压缩、断裂或抖动。
-
display: inline-block确保每个span拥有独立渲染盒，transform才能稳定作用于单个字符 - 配合
white-space: nowrap防止长文本自动换行破坏波形连续性 - 父容器加
letter-spacing: 2px控制原始字距，再给每个span加margin-right: -2px抵消拆分后多出的间隙
animation-delay 差值怎么选才自然
差值不是越小越好，也不是越大越“浪”。太小（如 0.01s）人眼分辨不出延迟，看起来还是齐刷刷抖；太大（如 0.3s）会导致波形断成几截，像分段弹跳。
- 推荐范围：字符间
animation-delay差值控制在0.06s–0.08s - 动画总时长建议
2s–3s：2s更轻快，3s更舒缓；快于1.5s易显抽搐 - 可用 CSS 变量简化写法：
animation-delay: calc(0.07s * var(--i));，JS 注入时只需设置--i
JS 拆字生成和样式联动的关键细节
手动写一堆 <span></span> 不现实，但 JS 生成后若没同步处理样式，依然白搭。重点不在“能不能拆”，而在“拆完能不能稳住布局+动画节奏”。
- 拆字后立即设置
span的display: inline-block和vertical-align: bottom（防基线错位） - 避免用
innerHTML +=拼接，改用textContent.split('').map(...).join('')防 XSS 且更安全 - 如果文字含空格或标点，需保留其
white-space: pre行为，否则波形会在空格处塌陷 - 响应式下注意：字体缩放可能影响
translateY幅度，建议用em或rem单位而非固定像素
实际最难调的不是动画本身，而是字符间距与垂直对齐的微小偏差——哪怕 0.5px 的 baseline 偏移，在波峰波谷叠加时就会让整行文字看起来“歪了”。这需要在真实设备上反复看，不能只盯开发工具里的渲染预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
