CSS实现button按钮闪烁效果

最新推荐文章于 2025-06-12 11:49:10 发布

橘猫猫猫猫丶

最新推荐文章于 2025-06-12 11:49:10 发布

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Caocui_/article/details/106855315

HTML 同时被 2 个专栏收录

3 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

本文介绍了一种使用CSS动画实现按钮闪烁效果的方法，通过定义关键帧动画使按钮在特定时间点改变透明度，达到类似星星闪烁的效果。该方案适用于需要视觉强调或交互反馈的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有个奇葩需求，我们客户要求按钮要像星星一样一闪一闪的！！！..........

<el-button type="success" class="flash animated infinite">按钮</el-button>

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash
}

@-webkit-keyframes flash {

  0%,
  100%,
  50% {
    opacity: 1
  }

  25%,
  75% {
    opacity: 0.4
  }
}

@keyframes flash {

  0%,
  100%,
  50% {
    opacity: 1
  }

  25%,
  75% {
    opacity: 0.4
  }
}