利用CSS动画与JavaScript实现动态颜色闪烁效果教程-html教程-PHP中文网

利用CSS动画与JavaScript实现动态颜色闪烁效果教程

聖光之護

发布： 2025-12-05 12:51:23

原创

688人浏览过

利用CSS动画与JavaScript实现动态颜色闪烁效果教程

本教程详细阐述如何通过纯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为例）来显示颜色变化。

<button class="my-button">点击我</button>

登录后复制

2. CSS动画定义

接下来，我们定义页面的初始样式和动画效果。

畅图

AI可视化工具

179

查看详情

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实现颜色闪烁
    


    <button class="my-button">点击我</button>

    <script>
        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');
        });
    </script>

登录后复制

注意事项与总结

分离关注点：这种方法将动画的视觉表现（CSS）与动画的触发逻辑（JavaScript）清晰地分离，提高了代码的可读性和可维护性。
性能优化：CSS动画通常由浏览器进行硬件加速，相比于通过JavaScript频繁修改样式属性，性能表现更优。
可重复性：通过监听animationend事件并在动画结束后移除控制类，确保了动画可以被反复触发，而不会因为类一直存在而无法再次播放。
强制重绘：在某些情况下，如果动画在结束前被再次触发，浏览器可能不会立即重新播放动画。void element.offsetWidth;（或offsetHeight、scrollWidth等）这个小技巧可以强制浏览器重新计算布局并重绘，从而确保动画能够立即重新开始。
目标元素：示例中以body作为目标元素，但你可以将.active类和animationend监听器应用于任何你希望进行动画的元素。
动画属性：@keyframes不仅可以动画background-color，还可以动画几乎所有可动画的CSS属性，如color、transform、opacity、width、height等。只需在@keyframes中定义相应的属性变化即可。