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

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

聖光之護

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

原创

714人浏览过

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

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

绿叶网络企业网站

界面淡雅，从企业介绍、产品介绍、留言反馈、新闻发布、客户服务等方面，全方位、立体式的展示企业的各种情况，主要强调产品优势和售后服务，符合现在最新的营销理念（企业销售的不仅是产品，还有服务），“友情链接”栏目是为了企业开展网上营销的必要手段，后台采用新的编辑器，不但能修改网页的文字颜色、大小、字体、对齐方式（使用起来就象WORD），还能插入图片、FLASH动画

查看详情

方案二：基于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中文网其它相关文章！