本文详细介绍了如何利用纯CSS的`@keyframes`动画和少量原生JavaScript代码，实现元素动态、重复的颜色闪烁效果，例如点击按钮后元素从红色闪烁到蓝色再回到红色。这种方法避免了依赖大型第三方库，通过添加和移除CSS类来触发和重置动画，确保了高效、轻量且可重复的动画行为。
实现动态颜色闪烁的挑战与解决方案
在网页开发中，我们经常需要为元素添加动态的视觉效果，例如在用户交互后让元素的颜色进行闪烁。一个常见的需求是，当用户点击按钮时，某个元素能从其原始颜色（如红色）过渡到另一种颜色（如蓝色），然后再平滑地回到原始颜色。
直接使用jQuery的.css()方法结合CSS的transition属性来尝试实现这种多阶段的颜色变化，往往会遇到问题。例如，以下代码尝试先将颜色变为蓝色，再变为红色：
$(".my-button").click(function() { $(".other-element").css("transition", "color .3s").css("color", "blue"); // 预期：变为蓝色后，再变为红色 $(".other-element").css("transition", "color .6s").css("color", "red");});
然而，这段代码通常只会显示最终的红色，而不会经过蓝色的中间状态。这是因为transition属性定义的是当一个CSS属性的值发生变化时，如何平滑地从旧值过渡到新值。当你在同一个事件循环中连续设置属性时，浏览器可能只会应用最后一个状态，或者前一个过渡还没有开始就被新的过渡覆盖。要实现一个按时间序列执行的动画，我们需要更强大的机制。
立即学习“Java免费学习笔记（深入）”；
解决方案是利用CSS的@keyframes规则来定义一个完整的动画序列，并结合JavaScript来简单地触发和重置这个动画。这种方法将动画逻辑完全封装在CSS中，而JavaScript只负责控制动画的播放，从而实现了职责分离、性能优化且易于维护。
核心实现：CSS动画与JavaScript触发
这种方法的核心在于两部分：
CSS部分： 使用@keyframes定义一个包含多个颜色状态的动画序列。JavaScript部分： 通过添加和移除一个CSS类来触发动画，并确保动画结束后能被再次触发。
1. 定义CSS动画
首先，我们需要在CSS中定义元素的初始状态，并创建一个@keyframes规则来描述颜色变化的完整序列。
body { margin: 0; background-color: #f00; /* 初始背景色：红色 */ display: flex; min-height: 100vh;}/* 按钮样式（可选，仅为示例提供上下文）*/.my-button { margin: auto; background-color: white; border: none; border-radius: 3px; padding: 10px 20px; transition: .2s; box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);}.my-button:hover { background-color: #ddd;}/* 定义触发动画的类 */.active { animation: bganim .6s; /* 应用名为bganim的动画，持续0.6秒 */}/* 定义颜色闪烁的关键帧动画 */@keyframes bganim { 0%, /* 动画开始和结束时 */ 100% { background-color: #f00; /* 红色 */ } 50% { background-color: #00f; /* 动画中间时：蓝色 */ }}
在上述CSS代码中：
我们为body设置了初始的background-color为红色（#f00）。@keyframes bganim定义了一个名为bganim的动画。0%和100%处，背景色为红色（#f00）。50%处，背景色变为蓝色（#00f）。.active类是触发动画的关键。当这个类被添加到元素上时，它会应用bganim动画，持续时间为0.6s。这意味着动画将从红色开始，在0.3秒时达到蓝色，然后在0.6秒时回到红色。
2. 使用JavaScript触发和重置动画
为了让动画在每次点击时都能重新播放，我们需要在动画结束时将触发动画的类移除。
const button = document.querySelector('.my-button');const other = document.body; // 假设我们要动画的元素是bodybutton.addEventListener('click', function() { other.classList.add('active'); // 点击时添加active类，触发动画});// 监听动画结束事件other.addEventListener('animationend', function() { other.classList.remove('active'); // 动画结束后移除active类，以便下次点击时能重新触发});
这段JavaScript代码做了以下几件事：
获取了触发动画的按钮元素（.my-button）和目标动画元素（这里是body）。为按钮添加了一个click事件监听器。当按钮被点击时，它会给目标元素添加active类，从而触发CSS动画。为目标元素添加了一个animationend事件监听器。当bganim动画完成时，这个事件会被触发，然后我们移除active类。移除active类是至关重要的一步，它将元素重置到未动画的状态，使得在下一次点击时，动画能够从头开始播放。
3. HTML结构
为了使上述CSS和JavaScript代码生效，我们需要一个基本的HTML结构：
颜色闪烁教程
将上面提供的CSS和JavaScript代码分别保存到style.css和script.js文件中，并确保在HTML中正确引入。
示例代码整合
style.css:
body { margin: 0; background-color: #f00; /* 初始背景色：红色 */ display: flex; min-height: 100vh;}.my-button { margin: auto; background-color: white; border: none; border-radius: 3px; padding: 10px 20px; transition: .2s; box-shadow: 1px 1px 4px rgba(0, 0, 0, .5); cursor: pointer; /* 添加鼠标手势 */}.my-button:hover { background-color: #ddd;}.active { animation: bganim .6s forwards; /* 添加forwards保持动画结束状态，此处不加也可以因为100%是初始状态 */}@keyframes bganim { 0%, 100% { background-color: #f00; } 50% { background-color: #00f; }}
script.js:
const button = document.querySelector('.my-button');const other = document.body; // 目标元素，这里是bodybutton.addEventListener('click', function() { // 确保在添加类之前移除，以防快速点击导致动画行为异常 if (other.classList.contains('active')) { other.classList.remove('active'); // 强制浏览器重新计算样式，以便立即重新触发动画 void other.offsetWidth; } other.classList.add('active');});other.addEventListener('animationend', function() { other.classList.remove('active');});
在script.js中，我添加了一个额外的检查：if (other.classList.contains(‘active’)) { other.classList.remove(‘active’); void other.offsetWidth; }。这在某些浏览器或快速点击场景下，可以更可靠地强制动画重新播放。void other.offsetWidth;是一个小技巧，通过请求元素的布局信息来强制浏览器进行一次重绘/回流，从而确保在添加active类时动画能够被正确地重新触发。
注意事项与总结
分离关注点： 这种方法将动画的复杂逻辑（时间、关键帧、属性变化）完全放在CSS中，而JavaScript只负责简单的触发控制，使得代码更清晰、易于维护。性能优势： CSS动画通常由浏览器进行优化，并可能利用GPU进行渲染，提供比JavaScript驱动的动画更流畅的性能。可重用性： 定义好的.active类和@keyframes动画可以轻松应用于页面上的任何其他元素，实现一致的动画效果。动画属性： 示例中动画的是background-color，但你可以根据需要动画任何可动画的CSS属性，例如color（文字颜色）、transform（位置、大小、旋转）、opacity等。只需在@keyframes中修改相应的属性即可。animationend事件： 这是一个标准的Web API事件，当CSS动画完成其一次迭代时触发。对于无限循环的动画，它不会被触发。兼容性： animationend事件和@keyframes动画在现代浏览器中都有良好的支持。对于旧版浏览器，可能需要添加厂商前缀（如-webkit-），但这在当前开发中已不常见。
通过这种纯CSS动画与JavaScript结合的方法，你可以灵活、高效地实现各种复杂的动态视觉效果，同时保持代码的简洁和高性能。
以上就是使用纯CSS动画与JavaScript高效实现元素颜色闪烁效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1603834.html
微信扫一扫 
支付宝扫一扫 
