HTML文字波浪动画CSS实现方法

大家好，今天本人给大家带来文章《HTML中实现文字波浪动画的CSS技巧》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

实现文字波浪动画的核心是将每个字母包裹在单独的 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 等 */
}

总之，处理不同字体和字号的情况需要你进行一些实验和调整，找到最佳的参数组合。

今天关于《HTML文字波浪动画CSS实现方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！