当前位置：首页 > 文章列表 > 文章 > 前端 > CSS文字抖动效果实现教程

CSS文字抖动效果实现教程

2025-09-21 15:33:54 0浏览收藏

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

通常，我们使用 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 + `${c}`), '');
};

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 代码：

This text should wiggle...

...while this text should not...

...but this should.

Manually wiggle...

这段 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 + `${c}`), '');
};

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 代码：

This text should wiggle...

...while this text should not...

...but this should.

Manually wiggle...

HTML 代码与方案一相同。

总结与注意事项

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

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

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