CSS文字抖动效果实现教程

想让你的网页文字动起来吗？本文为你揭秘**CSS文字抖动动画**的实现方法！我们将介绍如何利用JavaScript和CSS，通过两种不同的方案，为页面上的多个元素添加炫酷的文字抖动效果。重点在于如何巧妙运用类选择器代替ID选择器，实现更灵活的动画控制，提升网页互动性。文章提供详细的代码示例和注意事项，无论你是前端新手还是经验丰富的开发者，都能轻松掌握。还在等什么？快来学习如何让你的文字“抖”起来，为你的网站增添更多活力吧！提升用户体验，从细节开始！

本文将介绍如何使用 JavaScript 和 CSS 为页面上的多个元素添加文字抖动动画效果，重点讲解如何使用类选择器代替 ID 选择器，实现更灵活的动画控制。我们将提供两种实现方案，并附带详细的代码示例和注意事项，帮助你轻松实现炫酷的文字动画效果。

实现文字抖动动画的两种方案

通常，我们使用 JavaScript 操作 DOM 元素，并结合 CSS 动画来实现各种动态效果。对于文字抖动动画，核心思路是将文本拆分成单个字符，并为每个字符添加 标签，然后利用 CSS 动画控制每个 标签的位置，从而产生抖动效果。以下介绍两种方案，它们的主要区别在于CSS选择器如何与动态生成的span元素关联。

方案一：基于容器类控制动画

此方案通过为包含文本的容器元素添加特定的类（例如 .wiggle），然后使用 JavaScript 动态生成 标签，并将它们插入到容器中。CSS 样式则针对 .wiggle span 选择器进行定义，从而控制容器内所有 标签的动画效果。

JavaScript 代码：

const wiggle = (elementOrSelector) => {
  const element = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector)
    : elementOrSelector;
  if (!element.classList.contains('wiggle')) {
    element.classList.add('wiggle'); // Or control with a data attribute
  }
  const text = element.textContent;
  element.textContent = '';
  element.innerHTML = text.split('').reduce((html, c, i) =>
    (html + `<span style="--n:${10 * i - 10000}ms;">${c}</span>`), '');
};

const wiggleAll = () => {
  document.querySelectorAll('.wiggle').forEach(wiggle);
}

wiggleAll(); // Wiggle all

wiggle('.wiggle-single'); // Wiggle this manually

这段代码定义了两个函数：

• wiggle(elementOrSelector): 接收一个元素或选择器作为参数，找到对应的 DOM 元素，如果该元素没有 wiggle 类，则添加该类。然后，获取元素的文本内容，将其拆分成单个字符，并为每个字符创建一个 标签，设置 style 属性中的 --n 变量，用于控制动画延迟。最后，将生成的 标签插入到元素中。
• wiggleAll(): 找到所有具有 wiggle 类的元素，并调用 wiggle() 函数为它们添加动画效果。

CSS 代码：

@keyframes wave {
  0%   { top:  0px; }
  25%  { top: -4px; }
  50%  { top:  0px; }
  75%  { top:  4px; }
  100% { top:  0px; }
}

.wiggle span {
  animation-delay: var(--n);
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative;
}

这段 CSS 代码定义了一个名为 wave 的关键帧动画，用于控制文字的上下抖动。.wiggle span 选择器用于选择所有具有 wiggle 类的元素内部的 标签，并为它们应用动画效果。animation-delay: var(--n); 使用 CSS 变量 --n 来控制每个 标签的动画延迟，从而产生错落有致的抖动效果。

HTML 代码：

<h1 class="wiggle">This text should wiggle...</h1>

<h2>...while this text should not...</h2>

<h1 class="wiggle">...but this should.</h1>

<h1 class="wiggle-single">Manually wiggle...</h1>

这段 HTML 代码展示了如何使用 wiggle 类来指定需要添加动画效果的元素。

方案二：基于Span类控制动画

此方案与方案一类似，但它不依赖于容器的类名来选择 标签。相反，它为每个动态生成的 标签添加一个特定的类（例如 .wiggler），然后使用 CSS 样式针对 .wiggler 选择器进行定义。这种方法将 标签从其容器中解耦，从而提供更大的灵活性。

JavaScript 代码：

const wiggle = (elementOrSelector) => {
  const element = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector)
    : elementOrSelector;
  const text = element.textContent;
  element.textContent = '';
  element.innerHTML = text.split('').reduce((html, c, i) =>
    (html + `<span class="wiggler" style="--n:${10 * i - 10000}ms;">${c}</span>`), '');
};

const wiggleAll = () => {
  document.querySelectorAll('.wiggle').forEach(wiggle);
}

wiggleAll(); // Wiggle all

wiggle('.wiggle-single'); // Wiggle this manually

与方案一不同的是，此方案的 JavaScript 代码在创建 标签时，添加了 class="wiggler" 属性。

CSS 代码：

@keyframes wave {
  0%   { top:  0px; }
  25%  { top: -4px; }
  50%  { top:  0px; }
  75%  { top:  4px; }
  100% { top:  0px; }
}

.wiggler {
  animation-delay: var(--n);
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative;
}

此方案的 CSS 代码使用 .wiggler 选择器来选择所有具有 wiggler 类的元素，并为它们应用动画效果。

HTML 代码：

<h1 class="wiggle">This text should wiggle...</h1>

<h2>...while this text should not...</h2>

<h1 class="wiggle">...but this should.</h1>

<h1 class="wiggle-single">Manually wiggle...</h1>

HTML 代码与方案一相同。

总结与注意事项

• 类选择器的优势： 使用类选择器可以更灵活地控制动画效果，可以方便地为多个元素添加相同的动画效果，而无需为每个元素单独编写代码。
• CSS 变量： 使用 CSS 变量可以方便地控制动画的各个方面，例如动画延迟、抖动幅度等。
• 性能优化： 如果页面上的元素数量很多，频繁的 DOM 操作可能会影响性能。可以考虑使用文档片段 (DocumentFragment) 来批量更新 DOM，或者使用 requestAnimationFrame 来优化动画效果。
• 兼容性： 确保代码在不同的浏览器中都能正常运行。可以使用 Babel 等工具将 ES6+ 代码转换为 ES5 代码，以提高兼容性。

通过以上两种方案，你可以轻松地为页面上的多个元素添加文字抖动动画效果，并根据实际需求选择合适的方案。希望本文能帮助你更好地理解和应用 JavaScript 和 CSS 动画技术。

好了，本文到此结束，带大家了解了《CSS文字抖动效果实现教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！