使用纯CSS动画与JavaScript高效实现元素颜色闪烁效果-html教程-PHP中文网

使用纯CSS动画与JavaScript高效实现元素颜色闪烁效果

聖光之護

发布： 2025-12-12 15:14:20

原创

433人浏览过

使用纯css动画与javascript高效实现元素颜色闪烁效果

本文详细介绍了如何利用纯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代码中：

Procys

AI驱动的发票数据处理

102

查看详情

我们为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; // 假设我们要动画的元素是body

button.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结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色闪烁教程</title>
    <link rel="stylesheet" href="style.css"> <!-- 引入你的CSS文件 -->
</head>
<body>
    <button class="my-button">点击我</button>

    <script src="script.js"></script> <!-- 引入你的JavaScript文件 -->
</body>
</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; // 目标元素，这里是body

button.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-），但这在当前开发中已不常见。