js怎样实现文字波浪动画 4种波浪效果让文本动感十足-js教程-PHP中文网

js怎样实现文字波浪动画 4种波浪效果让文本动感十足

裘德小鎮的故事

发布： 2025-06-27 16:36:37

原创

663人浏览过

js实现文字波浪动画的核心是控制每个字符的transform属性，具体步骤为：1.将文本拆分为单个字符并用span包裹；2.通过js设置每个span的translatey值，利用正弦或余弦函数形成波动；3.使用css动画和animationdelay实现连贯的波浪效果；更复杂的效果如左右偏移、颜色变化、3d波浪及鼠标交互可通过叠加数学函数和精准js控制实现；优化性能的方法包括减少dom操作、使用css动画、启用硬件加速以及应用节流防抖技术；其应用场景涵盖loading动画、按钮hover效果、标题强调及创意banner等。

js怎样实现文字波浪动画 4种波浪效果让文本动感十足

文字波浪动画，说白了就是让文字像水波一样动起来，给网页增加点活力和趣味性。用JS实现并不难，核心思路就是控制每个文字的上下位置，让它们按照一定的规律波动。

解决方案：

首先，需要将文本拆分成单个字符，然后用 span 标签包裹起来。接下来，通过 JS 控制每个 span 标签的 transform: translateY() 属性，改变其垂直位置。关键在于计算每个字符的 translateY 值，这需要用到正弦或余弦函数，让它们呈现出波浪的形状。

<div class="wave">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
</div>

<style>
.wave {
  position: relative;
  display: flex;
}

.wave span {
  position: relative;
  display: block;
  animation: wave-animation 1s infinite ease-in-out;
}

@keyframes wave-animation {
  0%, 40%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-20px);
  }
}
</style>

<script>
const wave = document.querySelector('.wave');
const letters = wave.querySelectorAll('span');

letters.forEach((letter, index) => {
  letter.style.animationDelay = `${index * 0.1}s`;
});
</script>

登录后复制

这段代码是最基础的波浪效果，每个字母都会上下移动。可以通过调整 animationDelay 和 translateY 的值来改变波浪的频率和幅度。

JS 如何实现更复杂的文字波浪动画效果？

除了简单的上下波动，还可以实现一些更炫酷的效果，比如：

左右偏移的波浪： 不仅改变 translateY，也改变 translateX，让文字在水平方向上也产生波动。
颜色变化的波浪： 在波浪动画的同时，改变文字的颜色，增加视觉冲击力。可以用 CSS 的 filter: hue-rotate() 来实现颜色渐变。
3D 波浪： 利用 transform: rotateX() 或 transform: rotateY()，让文字在三维空间中波动，增加立体感。
鼠标交互波浪： 根据鼠标的位置，动态改变波浪的幅度或频率，让波浪与用户的交互产生互动。

实现这些效果，需要在 JS 中更精确地控制每个字符的 transform 属性，并且需要更复杂的数学计算，比如叠加多个正弦波。

如何优化 JS 文字波浪动画的性能？

文字波浪动画虽然好看，但也可能影响网页的性能，尤其是在文字数量很多的情况下。优化性能的一些方法：

减少 DOM 操作： 尽量避免频繁地修改 DOM 元素，可以将需要改变的属性缓存起来，一次性修改。
使用 CSS 动画： CSS 动画通常比 JS 动画性能更好，可以尽量使用 CSS 来实现简单的波浪效果。
硬件加速： 确保浏览器开启了硬件加速，可以提高动画的渲染速度。可以通过 CSS 的 transform: translateZ(0) 或 backface-visibility: hidden 来触发硬件加速。
节流和防抖： 对于鼠标交互的波浪动画，使用节流或防抖技术，减少事件处理函数的执行频率。

文字波浪动画的实际应用场景有哪些？

文字波浪动画不仅仅是炫技，还可以应用在很多实际场景中：