css实现图标闪烁(Element-UI el-badge标记组件为例)

这篇具有很好参考价值的文章主要介绍了css实现图标闪烁(Element-UI el-badge标记组件为例)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文以Element-UI el-badge标记组件为例,实现el-badge图标的闪烁,其他html元素也可以使用此方法实现闪烁功能。

实现闪烁功能,主要用到下面3个CSS属性

1、@keyframes

css实现图标闪烁(Element-UI el-badge标记组件为例)

利用 @keyframes 规则来创建动画。

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中,您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。

0% 是动画的开始时间,100% 动画的结束时间。

2、opacity 

css实现图标闪烁(Element-UI el-badge标记组件为例)

 opacity属性用于控制html元素的透明度,结合前面介绍的@keyframes动画属性,在规定时间内变化元素的透明度,比如0秒时透明度是1(即100%,原本的样子),0.5秒的时候透明度是0.4,1秒的时候透明度又变成1,如此循环,得到闪烁的效果。那么如何使我们的动画进行循环播放呢,这里需要介绍下我们用到的第三个CSS属性 animation

3、animation

css实现图标闪烁(Element-UI el-badge标记组件为例)

 animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name   //动画名称
  • animation-duration //动画持续时间
  • animation-timing-function //动画计时功能
  • animation-delay //动画延迟
  • animation-iteration-count  //动画迭代计数
  • animation-direction //动画方向

我们将animation-name绑定到前面设置的@keyframes动画名称上,并且设置animation-duration(动画持续时间)为2s,请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。如何设置animation-iteration-count 为infinite,表示一直执行,如此闪烁的动画就实现了。文章来源地址https://www.toymoban.com/news/detail-475586.html

附上代码

 <template>
  <div>
    <el-badge :value="number" class="item" :class="number > 0 ? 'flash' : ''" :hidden="number == 0">
      <el-button size="small">评论</el-button>
    </el-badge>
  </div>
</template>

<script>
  export default {
    name: "test",
    data() {
      return {
        number: 0,
      }
    },
  }
</script>

<style scoped>
  /*闪烁动画*/
 @keyframes twinkle {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    }
  }
  .flash /deep/ .el-badge__content {
    animation: twinkle 2s;
    animation-iteration-count: infinite;
  }
</style>

到了这里,关于css实现图标闪烁(Element-UI el-badge标记组件为例)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包