本教程详细阐述如何通过纯css动画结合少量javascript代码，实现元素动态、可重复的颜色闪烁效果，避免引入大型第三方库。核心思想是利用css的`@keyframes`定义完整的动画序列，并通过javascript在点击事件中添加和移除控制动画的css类，同时监听`animationend`事件以确保动画的可重复性。这种方法提供了高效、灵活且易于维护的解决方案。
在前端开发中，我们经常需要为用户界面添加动态效果，例如当用户点击按钮时，某个元素能够短暂地改变颜色，然后恢复到初始状态。直接使用CSS的transition属性配合JavaScript来尝试实现这种“闪烁”或“先变蓝再变红”的序列效果，往往会遇到挑战。例如，连续设置两个css()调用来改变颜色并期望它们按顺序执行过渡，通常只会显示最后一个状态，因为浏览器在同一事件循环中会合并这些样式更新。
为了高效且优雅地实现这类动态效果，特别是需要重复触发的动画，推荐的方法是利用CSS的@keyframes动画结合JavaScript来控制动画的播放。这种方法将动画的定义与触发机制分离，使得代码更清晰、更易于维护，并且性能通常也更好。
核心概念：CSS动画与JavaScript触发
该方法的核心在于：
CSS @keyframes定义动画序列：在CSS中定义一个完整的动画序列，包括起始、中间和结束状态。这使得颜色从初始状态到目标状态再回到初始状态的过程可以在CSS中一次性描述。JavaScript控制动画播放：通过JavaScript在用户交互时（例如点击按钮）为目标元素添加一个特定的CSS类。这个类会触发之前定义好的CSS动画。监听animationend事件：当动画播放完毕后，通过监听animationend事件，JavaScript可以移除之前添加的CSS类，从而使动画可以再次被触发。
实施步骤
我们将通过一个示例来演示如何实现点击按钮时，页面背景色从红色闪烁到蓝色再回到红色的效果。
立即学习“Java免费学习笔记（深入）”；
1. HTML结构
首先，我们需要一个按钮来触发动画，以及一个目标元素（这里以body为例）来显示颜色变化。
2. 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;}/* 定义闪烁动画 */@keyframes bganim { 0%, 100% { background-color: #f00; /* 动画开始和结束时为红色 */ } 50% { background-color: #00f; /* 动画中途（50%）时为蓝色 */ }}/* 激活动画的类 */.active { animation: bganim .6s forwards; /* 应用bganim动画，持续0.6秒，并保持动画结束状态 */}
CSS解释：
body：设置初始背景色为红色（#f00）。@keyframes bganim：定义了一个名为bganim的关键帧动画。0%, 100%：表示动画开始和结束时，background-color为红色。50%：表示动画进行到一半时，background-color变为蓝色（#00f）。这个定义确保了颜色从红 -> 蓝 -> 红的完整循环。.active：这是一个控制类。当这个类被添加到元素上时，它会触发bganim动画。animation: bganim .6s forwards;表示动画名为bganim，持续时间为0.6秒，forwards确保动画结束后元素保持在动画的最终状态（虽然这里100%是初始状态，但forwards通常是一个好习惯）。
3. JavaScript控制逻辑
最后，使用JavaScript来监听按钮点击事件，并动态添加/移除.active类。
const button = document.querySelector('.my-button');const targetElement = document.body; // 动画目标元素button.addEventListener('click', function() { // 如果动画正在进行，先移除类再添加，确保动画可以重新触发 if (targetElement.classList.contains('active')) { targetElement.classList.remove('active'); // 强制浏览器重绘以重新开始动画 void targetElement.offsetWidth; } targetElement.classList.add('active');});targetElement.addEventListener('animationend', function() { targetElement.classList.remove('active');});
JavaScript解释：
document.querySelector(‘.my-button’)：获取按钮元素。document.body：指定动画的目标元素为body。button.addEventListener(‘click’, function() { … })：当按钮被点击时执行回调函数。在回调函数内部，我们首先检查targetElement是否已经包含active类。如果包含，说明动画可能正在进行或刚结束，为了确保动画能够重新播放，我们先移除active类。void targetElement.offsetWidth;：这是一个小技巧，通过访问元素的某个属性（如offsetWidth）来强制浏览器进行重绘，从而“重置”动画状态，确保即使在动画结束前再次点击也能重新播放。targetElement.classList.add(‘active’)：为目标元素添加active类，从而触发CSS动画。targetElement.addEventListener(‘animationend’, function() { … })：监听目标元素的animationend事件。当动画播放完毕后，这个事件会被触发。targetElement.classList.remove(‘active’)：在动画结束后移除active类。这是关键一步，它使得动画可以再次被触发，因为下次点击时，active类可以重新被添加。
完整示例代码
将上述HTML、CSS和JavaScript代码组合，即可得到一个完整的、可运行的示例：
CSS动画与JS实现颜色闪烁 body { margin: 0; background-color: #f00; /* 初始背景色：红色 */ display: flex; min-height: 100vh; transition: background-color 0.2s ease; /* 为非动画状态的颜色变化添加过渡 */ } .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; } /* 定义闪烁动画 */ @keyframes bganim { 0%, 100% { background-color: #f00; /* 动画开始和结束时为红色 */ } 50% { background-color: #00f; /* 动画中途（50%）时为蓝色 */ } } /* 激活动画的类 */ .active { animation: bganim .6s forwards; /* 应用bganim动画，持续0.6秒，并保持动画结束状态 */ } const button = document.querySelector('.my-button'); const targetElement = document.body; // 动画目标元素 button.addEventListener('click', function() { // 如果动画正在进行，先移除类再添加，确保动画可以重新触发 if (targetElement.classList.contains('active')) { targetElement.classList.remove('active'); // 强制浏览器重绘以重新开始动画 void targetElement.offsetWidth; } targetElement.classList.add('active'); }); targetElement.addEventListener('animationend', function() { targetElement.classList.remove('active'); });
注意事项与总结
分离关注点：这种方法将动画的视觉表现（CSS）与动画的触发逻辑（JavaScript）清晰地分离，提高了代码的可读性和可维护性。性能优化：CSS动画通常由浏览器进行硬件加速，相比于通过JavaScript频繁修改样式属性，性能表现更优。可重复性：通过监听animationend事件并在动画结束后移除控制类，确保了动画可以被反复触发，而不会因为类一直存在而无法再次播放。强制重绘：在某些情况下，如果动画在结束前被再次触发，浏览器可能不会立即重新播放动画。void element.offsetWidth;（或offsetHeight、scrollWidth等）这个小技巧可以强制浏览器重新计算布局并重绘，从而确保动画能够立即重新开始。目标元素：示例中以body作为目标元素，但你可以将.active类和animationend监听器应用于任何你希望进行动画的元素。动画属性：@keyframes不仅可以动画background-color，还可以动画几乎所有可动画的CSS属性，如color、transform、opacity、width、height等。只需在@keyframes中定义相应的属性变化即可。
通过上述方法，我们可以轻松实现各种复杂的、可重复的动态UI效果，而无需依赖大型JavaScript库，保持项目的轻量和高效。
以上就是利用CSS动画与JavaScript实现动态颜色闪烁效果教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1602716.html
微信扫一扫 
支付宝扫一扫 
