本文将介绍如何使用 JavaScript 和 CSS 为页面上的多个元素添加文字抖动动画效果，重点讲解如何使用类选择器代替 ID 选择器，实现更灵活的动画控制。我们将提供两种实现方案，并附带详细的代码示例和注意事项，帮助你轻松实现炫酷的文字动画效果。
实现文字抖动动画的两种方案
通常，我们使用 JavaScript 操作 DOM 元素，并结合 CSS 动画来实现各种动态效果。对于文字抖动动画，核心思路是将文本拆分成单个字符，并为每个字符添加 <span> 标签，然后利用 CSS 动画控制每个 <span> 标签的位置，从而产生抖动效果。以下介绍两种方案，它们的主要区别在于CSS选择器如何与动态生成的span元素关联。
方案一：基于容器类控制动画
此方案通过为包含文本的容器元素添加特定的类（例如 .wiggle），然后使用 JavaScript 动态生成 <span> 标签，并将它们插入到容器中。CSS 样式则针对 .wiggle span 选择器进行定义，从而控制容器内所有 <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>${c}</span>`), '');
};
const wiggleAll = () => {
document.querySelectorAll('.wiggle').forEach(wiggle);
}
wiggleAll(); // Wiggle all
wiggle('.wiggle-single'); // Wiggle this manually
这段代码定义了两个函数：
- wiggle(elementOrSelector): 接收一个元素或选择器作为参数，找到对应的 DOM 元素，如果该元素没有 wiggle 类，则添加该类。然后，获取元素的文本内容，将其拆分成单个字符，并为每个字符创建一个 <span> 标签，设置 style 属性中的 –n 变量，用于控制动画延迟。最后，将生成的 <span> 标签插入到元素中。
- 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 类的元素内部的 <span> 标签，并为它们应用动画效果。animation-delay: var(–n); 使用 CSS 变量 –n 来控制每个 <span> 标签的动画延迟，从而产生错落有致的抖动效果。
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类控制动画
此方案与方案一类似，但它不依赖于容器的类名来选择 <span> 标签。相反，它为每个动态生成的 <span> 标签添加一个特定的类（例如 .wiggler），然后使用 CSS 样式针对 .wiggler 选择器进行定义。这种方法将 <span> 标签从其容器中解耦，从而提供更大的灵活性。
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">${c}</span>`), '');
};
const wiggleAll = () => {
document.querySelectorAll('.wiggle').forEach(wiggle);
}
wiggleAll(); // Wiggle all
wiggle('.wiggle-single'); // Wiggle this manually
与方案一不同的是，此方案的 JavaScript 代码在创建 <span> 标签时，添加了 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 动画技术。
暂无评论内容