使用类选择器实现文字抖动动画-js教程-PHP中文网

使用类选择器实现文字抖动动画

聖光之護

发布： 2025-08-28 22:51:01

原创

704人浏览过

使用类选择器实现文字抖动动画

本文将介绍如何使用 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 类来指定需要添加动画效果的元素。

Matlab语言的特点中文WORD版

本文档主要讲述的是Matlab语言的特点；Matlab具有用法简单、灵活、程式结构性强、延展性好等优点，已经逐渐成为科技计算、视图交互系统和程序中的首选语言工具。特别是它在线性代数、数理统计、自动控制、数字信号处理、动态系统仿真等方面表现突出，已经成为科研工作人员和工程技术人员进行科学研究和生产实践的有利武器。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

查看详情

方案二：基于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 动画技术。

以上就是使用类选择器实现文字抖动动画的详细内容，更多请关注php中文网其它相关文章！