本文介绍了如何通过JavaScript和CSS实现文字抖动动画，并将其应用于多个具有相同类名的元素，而不是单个ID。我们将探讨如何使用querySelectorAll方法选取所有具有指定类名的元素，并使用JavaScript动态地为每个字符创建带有动画延迟的标签，从而实现统一的抖动效果。同时，我们还会提供两种不同的实现方案，以满足不同的需求。
使用类名实现文字抖动动画
最初的实现方案是针对单个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 + `${c}`), '');};const wiggleAll = () => { document.querySelectorAll('.wiggle').forEach(wiggle);}wiggleAll(); // Wiggle allwiggle('.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 代码:
This text should wiggle...
...while this text should not...
...but this should.
Manually wiggle...
代码解释:
wiggle(elementOrSelector) 函数接受一个元素或选择器作为参数，并对其应用抖动效果。wiggleAll() 函数选取所有类名为 wiggle 的元素，并对它们应用 wiggle() 函数。CSS 定义了 wave 动画和 .wiggle span 的样式，包括动画延迟和位置。HTML 中，类名为 wiggle 的
元素将应用抖动动画。
方案二：通过为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 + `${c}`), '');};const wiggleAll = () => { document.querySelectorAll('.wiggle').forEach(wiggle);}wiggleAll(); // Wiggle allwiggle('.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 代码:
This text should wiggle...
...while this text should not...
...but this should.
Manually wiggle...
代码解释:
wiggle(elementOrSelector) 函数与方案一类似，但现在它为每个 元素添加了 wiggler 类名。wiggleAll() 函数同样选取所有类名为 wiggle 的元素，并应用 wiggle() 函数。CSS 定义了 wave 动画和 .wiggler 的样式，包括动画延迟和位置。HTML 结构与方案一相同。
注意事项
性能优化: 对于大量文本，频繁操作 DOM 可能会影响性能。可以考虑使用 requestAnimationFrame 来优化动画渲染。兼容性: 确保代码在目标浏览器上具有良好的兼容性。动画效果: 可以根据需要调整动画的关键帧、延迟和持续时间，以获得最佳的视觉效果。
总结
通过以上两种方案，我们可以灵活地使用类名而非ID来实现文字抖动动画。方案一通过控制容器元素的类名来决定是否应用动画，而方案二则通过为每个 元素添加类名来实现更灵活的样式控制。选择哪种方案取决于具体的应用场景和需求。
以上就是如何使用类名而非ID在网页上运行文字抖动动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518122.html
微信扫一扫 
支付宝扫一扫 
