实现文字波浪动画的核心是将每个字母包裹在单独的 span 中，并通过 css 动画实现错落有致的上下运动。首先，用 html 将每个字母分别包裹在 span 标签内；其次，使用 css 为每个 span 应用动画，使其在垂直方向移动；接着，通过 animation-delay 设置不同的起始时间，形成波浪效果；若使用 JavaScript，可通过遍历 span 元素并设置 css 变量 –i 来动态控制延迟；若仅用 css，则可借助 :nth-child() 手动设定每个字母的延迟时间；此外，为使动画更自然，可添加旋转、缩放、透明度变化等效果，并调整缓动函数；最后，针对不同字体和字号，需适当调整 translatey 和 animation-delay 的值，以及 vertical-align 属性以修正基线位置，确保动画流畅协调。
实现文字波浪动画，核心在于利用CSS动画和一些巧妙的HTML结构。简单来说，就是把每个字母都单独包裹起来，然后让它们分别做上下运动，营造出波浪的效果。
解决方案：
首先，你需要将文本拆分成单独的字母，并用 span 标签包裹每个字母。然后，通过 CSS 为每个 span 元素应用动画，让它们在垂直方向上进行周期性的移动。关键在于，每个字母的动画起始时间应该略有不同，这样才能产生波浪的错落感。
立即学习“前端免费学习笔记（深入）”；
<div class="wavy"> <span>H</span> <span>e</span> <span>l</span> <span>l</span> <span>o</span> <span>!</span> </div>
.wavy { position: relative; } .wavy span { position: relative; display: inline-block; animation: wave 1s infinite; animation-delay: calc(0.1s * var(--i)); /*关键：延迟时间不同*/ } @keyframes wave { 0%, 40%, 100% { transform: translateY(0) } 20% { transform: translateY(-20px) } }
重要的一点是，你需要通过某种方式将每个 span 元素的索引传递给 CSS。这里我使用了 CSS 变量 –i，并在 HTML 中动态设置它。 如果你用JS生成这些span，那设置–i就很容易了。
如何动态设置CSS变量–i?
如果你使用 JavaScript，你可以轻松地遍历每个 span 元素，并设置其 –i 变量。例如：
const wavy = document.querySelector('.wavy'); const spans = wavy.querySelectorAll('span'); spans.forEach((span, index) => { span.style.setProperty('--i', index); });
这段代码会找到所有 .wavy 内部的 span 元素，然后为每个元素设置 –i 变量，值为它的索引。
如果不用JS呢？ 能不能纯CSS实现？
纯CSS实现稍微复杂一点，但也不是不可能。你可以利用 :nth-child() 选择器，为每个 span 元素设置不同的 animation-delay。但是，这种方法需要你预先知道文本的长度，并且在 CSS 中为每个字母都写一条规则。
.wavy span:nth-child(1) { animation-delay: 0s; } .wavy span:nth-child(2) { animation-delay: 0.1s; } .wavy span:nth-child(3) { animation-delay: 0.2s; } /* ... 更多规则 ... */
这种方法比较繁琐，不推荐使用，除非你的文本是固定的，并且长度很短。
如何让波浪效果更自然？
仅仅让字母上下移动可能还不够，你可以尝试添加一些其他的效果，例如：
- 旋转： 让字母在上下移动的同时，稍微旋转一下，增加一些动感。
- 缩放： 让字母在上下移动的同时，稍微缩放一下，增加一些层次感。
- 透明度： 让字母在上下移动的同时，改变透明度，增加一些朦胧感。
- 缓动函数： 使用不同的缓动函数，让动画效果更自然。例如，ease-in-out 可以让动画开始和结束时速度较慢，中间速度较快。
例如，你可以修改 @keyframes wave 规则，添加旋转和缩放效果：
@keyframes wave { 0%, 40%, 100% { transform: translateY(0) rotate(0deg) scale(1); } 20% { transform: translateY(-20px) rotate(10deg) scale(1.1); } }
这段代码会让字母在向上移动时，稍微旋转 10 度，并放大 1.1 倍。
如何处理不同字体和字号的情况？
不同的字体和字号可能会影响波浪动画的效果。你需要根据实际情况调整动画的参数，例如 translateY 的值、animation-delay 的值等。
一般来说，字体越大，translateY 的值应该越大，才能产生明显的波浪效果。同时，animation-delay 的值也应该适当调整，以保证波浪的流畅性。
另外，不同的字体可能会有不同的基线位置，这也会影响波浪动画的效果。你可以尝试调整 span 元素的 vertical-align 属性，来修正基线位置。例如：
.wavy span { vertical-align: middle; /* 或者其他值，例如 top、bottom 等 */ }
总之，处理不同字体和字号的情况需要你进行一些实验和调整，找到最佳的参数组合。
