CSS实现button按钮闪烁效果

最新推荐文章于 2024-07-26 21:01:28 发布

原创最新推荐文章于 2024-07-26 21:01:28 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3 #css

HTML 同时被 2 个专栏收录

3 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

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

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

<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
  }
}