首页 > 营销学院 > 技术知识

高效实现点击按钮后的元素颜色闪烁动画：纯CSS与原生JS方案

本教程详细介绍了如何在不依赖jquery ui等第三方库的情况下，仅通过css的`@keyframes`动画和原生j*ascript的类操作，实现点击按钮后目标元素颜色动态闪烁的效果。我们将探讨传统jquery `transition`方法的局限性，并提供一种更高效、更纯粹的解决方案，确保动画的流畅性和可重复性。

在前端开发中，我们经常需要为用户交互添加视觉反馈，例如点击按钮后元素颜色的闪烁效果。尽管jQuery提供了强大的DOM操作能力，但对于复杂的、时间序列的动画，单纯依赖其css()方法配合CSS transition属性往往会遇到挑战。本教程将深入探讨一种利用CSS @keyframes动画与原生J*aScript进行类切换的优雅方案，实现轻量级且高性能的颜色闪烁效果。

传统方法的局限性

许多开发者在尝试实现类似“元素先变蓝，再变红”的序列动画时，可能会尝试以下jQuery代码：

$(".my-button").click(function() {        
    $(".other-element").css("transition", "color .3s").css("color", "blue");
    $(".other-element").css("transition", "color .6s").css("color", "red");
});

然而，这种方法通常无法达到预期效果。原因在于：

同步执行： J*aScript代码是同步执行的。当第一行设置颜色为蓝色时，第二行几乎立即执行，将颜色设置为红色。浏览器可能来不及渲染蓝色状态，或者即使渲染了，也会被随后的红色状态迅速覆盖。
transition的性质： transition属性定义的是元素属性从一个状态平滑过渡到另一个状态所需的时间和方式。它适用于属性的最终值发生变化时，而不是用于创建多步骤、时间序列的复杂动画。它无法管理一个元素在不同时间点经历多个中间状态。

为了实现这种多步骤的动画效果，我们需要引入更强大的CSS动画机制。

核心原理：CSS动画与J*aScript协作

实现颜色闪烁效果的推荐方案是结合CSS的@keyframes动画和原生J*aScript的类操作。

CSS @keyframes动画： @keyframes规则允许我们定义动画的各个阶段（或“帧”），指定在动画的不同百分比时间点上元素的样式。这使得我们可以精确控制颜色从初始状态到中间状态再回到初始状态的整个过程。
J*aScript类切换： J*aScript的作用变得非常简单：当按钮被点击时，为目标元素添加一个CSS类（例如.active），这个类会触发预定义的@keyframes动画。动画播放结束后，J*aScript会移除这个类，以便动画可以再次被触发。

这种方法将动画逻辑完全委托给CSS，利用了浏览器对CSS动画的优化（通常由硬件加速），而J*aScript只负责控制动画的启动和重置，从而实现了高性能和良好的可维护性。

Dream Machine

Dream Machine 是由 Luma AI 开发的一款 AI 视频生成工具，可以快速将文本和图像转换为高质量的视频内容。

157 查看详情 Dream Machine

实现步骤

1. HTML结构

首先，我们需要一个触发动画的按钮和一个将要进行颜色闪烁的目标元素。在本示例中，我们将动画应用于body元素，但你可以将其替换为任何你希望动画的特定元素。

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

2. CSS样式与动画定义

接下来，我们定义目标元素的初始样式、按钮样式，以及核心的@keyframes动画。

body {
  margin: 0;
  background-color: #f00; /* 初始背景色：红色 */
  display: flex;
  min-height: 100vh; /* 确保body占据整个视口高度 */
  justify-content: center; /* 居中按钮 */
  align-items: center; /* 居中按钮 */
}

.my-button {
  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 ease-in-out; /* 应用名为bganim的动画，持续0.6秒，缓动函数 */
}

/* 关键帧动画定义 */
@keyframes bganim {
  0%, 100% {
    background-color: #f00; /* 动画开始和结束时为红色 */
  }
  50% {
    background-color: #00f; /* 动画进行到一半时为蓝色 */
  }
}

body的初始background-color设置为红色（#f00）。
.active类是动画的触发器，当它被添加到body上时，bganim动画将开始播放。ease-in-out缓动函数使动画开始和结束时平滑。
@keyframes bganim定义了动画的三个关键状态：
- 0%：动画开始时，背景色为红色。
- 50%：动画进行到一半时，背景色变为蓝色（#00f）。
- 100%：动画结束时，背景色回到红色。

3. J*aScript逻辑

最后，我们使用原生J*aScript来监听按钮点击事件，并控制active类的添加和移除。

const button = document.querySelector('.my-button');
const targetElement = document.body; // 动画目标元素，这里是body

button.addEventListener('click', function() {
  // 检查目标元素是否正在动画，防止重复添加类导致动画中断或不流畅
  if (!targetElement.classList.contains('active')) {
    targetElement.classList.add('active');
  }
});

// 监听动画结束事件，动画结束后移除active类
targetElement.addEventListener('animationend', function() {
  targetElement.classList.remove('active');
});

document.querySelector('.my-button') 获取按钮元素。
document.body 设置动画的目标元素为body。如果你想动画其他元素，只需将其选择器替换为该元素的即可，例如 document.querySelector('.other-element')。
当按钮被点击时，targetElement.classList.add('active') 会为body添加.active类，从而触发动画。
targetElement.addEventListener('animationend', ...) 监听animationend事件。当CSS动画播放完毕后，这个事件会被触发，此时我们移除.active类，使得动画可以被再次触发。

完整示例代码

将以上HTML、CSS和J*aScript代码整合到一个文件中，即可看到效果。




    
    
    元素颜色闪烁动画
    



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

    <script>
        const button = document.querySelector('.my-button');
        const targetElement = document.body; // 动画目标元素，这里是body

        button.addEventListener('click', function() {
            // 检查目标元素是否正在动画，防止重复添加类导致动画中断或不流畅
            // 只有当动画未进行时才添加类，确保动画完整播放
            if (!targetElement.classList.contains('active')) {
                targetElement.classList.add('active');
            }
        });

        // 监听动画结束事件，动画结束后移除active类
        targetElement.addEventListener('animationend', function() {
            targetElement.classList.remove('active');
        });
    </script>

注意事项与最佳实践

动画目标元素： 示例中为了简化，将动画应用到body元素上。在实际项目中，你可以将.active类添加到任何你希望进行颜色闪烁的特定元素上，只需修改J*aScript中的targetElement选择器。
动画可重用性： 这种将动画逻辑封装在CSS类中的方法，使得动画本身具有高度可重用性。你可以在不同的J*aScript事件中触发相同的动画效果。
性能优势： CSS动画通常由浏览器进行优化，并可能在独立的线程中运行，利用GPU加速，因此在性能上通常优于通过J*aScript频繁操作DOM样式来实现的动画。
animationend事件： animationend事件是此方案的关键。它确保在动画完全播放完毕后才移除active类，从而允许动画完整重播。如果没有它，每次点击都可能在动画未结束时就重置，导致动画不完整。
防止重复触发： 在click事件监听器中添加if (!targetElement.classList.contains('active'))判断，可以避免在动画进行中重复点击按钮导致动画行为异常。
浏览器兼容性： 现代浏览器对@keyframes和animationend事件的支持良好。对于旧版浏览器，可能需要添加供应商前缀（如-webkit-），但现在已不常用。

总结

通过结合CSS的@keyframes动画和原生J*aScript的类切换，我们能够以一种高效、纯粹且易于维护的方式实现复杂的元素动画效果，例如点击按钮后的颜色闪烁。这种方法避免了引入额外的库，充分利用了浏览器对CSS动画的优化能力，是实现高性能Web动画的推荐实践。它不仅解决了传统jQuery transition方法在序列动画上的局限性，也为开发者提供了更灵活、更强大的动画控制手段。

以上就是高效实现点击按钮后的元素颜色闪烁动画：纯CSS与原生JS方案的详细内容，更多请关注其它相关文章！

# 高性能 # 名优网站建设联系人 # 关键词排名seo查看易速达 # 深圳小语种网站建设 # 中山seo公司价格 # seo麒麟写手 # 怒江州网站推广多少钱 # 回收化工推广网站有那些 # 怎么做公司网站优化推广 # seo是哪个的缩写 # 范县景区网站建设 # 能在 # 将其 # 只需 # 你可以 # 选择器 # css # 结束后 # 结束时 # 背景色 # 移除 # css动画 # ai # 前端开发 # ssl # 浏览器 # 前端 # js # html # jquery # java # javascript

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-12-14

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。