如何使用类名而非ID在网页上运行文字抖动动画-js教程-PHP中文网

如何使用类名而非ID在网页上运行文字抖动动画

聖光之護

发布： 2025-08-28 22:56:14

原创

256人浏览过

如何使用类名而非id在网页上运行文字抖动动画

本文介绍了如何通过JavaScript和CSS实现文字抖动动画，并将其应用于多个具有相同类名的元素，而不是单个ID。我们将探讨如何使用querySelectorAll方法选取所有具有指定类名的元素，并使用JavaScript动态地为每个字符创建带有动画延迟的<span>标签，从而实现统一的抖动效果。同时，我们还会提供两种不同的实现方案，以满足不同的需求。

使用类名实现文字抖动动画

最初的实现方案是针对单个ID设计的，现在我们需要将其扩展到可以应用于多个类名相同的元素。核心在于使用document.querySelectorAll来选取所有需要添加动画的元素。

方案一：通过添加类名控制动画

此方案的关键在于通过JavaScript控制元素的类名，从而决定是否应用抖动动画。

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

登录后复制

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;
}

登录后复制

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>

登录后复制

代码解释:

360智图

AI驱动的图片版权查询平台

143

查看详情

wiggle(elementOrSelector) 函数接受一个元素或选择器作为参数，并对其应用抖动效果。
wiggleAll() 函数选取所有类名为 wiggle 的元素，并对它们应用 wiggle() 函数。
CSS 定义了 wave 动画和 .wiggle span 的样式，包括动画延迟和位置。
HTML 中，类名为 wiggle 的 <h1> 元素将应用抖动动画。

方案二：通过为span添加类名控制动画

此方案解耦了span元素与其容器之间的关系，通过为每个span元素添加一个特定的类名，使得CSS规则更加灵活。

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

登录后复制

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;
}

登录后复制

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>

登录后复制

代码解释: