本文以Element-UI?el-badge標(biāo)記組件為例，實(shí)現(xiàn)el-badge圖標(biāo)的閃爍，其他html元素也可以使用此方法實(shí)現(xiàn)閃爍功能。

實(shí)現(xiàn)閃爍功能，主要用到下面3個(gè)CSS屬性

1、@keyframes

利用 @keyframes?規(guī)則來(lái)創(chuàng)建動(dòng)畫。

創(chuàng)建動(dòng)畫的原理是，將一套?CSS?樣式逐漸變化為另一套樣式。

在動(dòng)畫過(guò)程中，您能夠多次改變這套?CSS?樣式。

以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞?"from"?和?"to"，等價(jià)于?0%?和?100%。

0%?是動(dòng)畫的開始時(shí)間，100%?動(dòng)畫的結(jié)束時(shí)間。

2、opacity?

?opacity屬性用于控制html元素的透明度，結(jié)合前面介紹的@keyframes動(dòng)畫屬性，在規(guī)定時(shí)間內(nèi)變化元素的透明度，比如0秒時(shí)透明度是1（即100%，原本的樣子），0.5秒的時(shí)候透明度是0.4，1秒的時(shí)候透明度又變成1，如此循環(huán)，得到閃爍的效果。那么如何使我們的動(dòng)畫進(jìn)行循環(huán)播放呢，這里需要介紹下我們用到的第三個(gè)CSS屬性 animation

3、animation

?animation 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置六個(gè)動(dòng)畫屬性：

• animation-name? ?//動(dòng)畫名稱
• animation-duration //動(dòng)畫持續(xù)時(shí)間
• animation-timing-function //動(dòng)畫計(jì)時(shí)功能
• animation-delay //動(dòng)畫延遲
• animation-iteration-count? //動(dòng)畫迭代計(jì)數(shù)
• animation-direction //動(dòng)畫方向

我們將animation-name綁定到前面設(shè)置的@keyframes動(dòng)畫名稱上，并且設(shè)置animation-duration（動(dòng)畫持續(xù)時(shí)間）為2s，請(qǐng)始終規(guī)定 animation-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)播放動(dòng)畫了。如何設(shè)置animation-iteration-count 為infinite，表示一直執(zhí)行，如此閃爍的動(dòng)畫就實(shí)現(xiàn)了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-475586.html

附上代碼

 <template>
  <div>
    <el-badge :value="number" class="item" :class="number > 0 ? 'flash' : ''" :hidden="number == 0">
      <el-button size="small">評(píng)論</el-button>
    </el-badge>
  </div>
</template>

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

<style scoped>
  /*閃爍動(dòng)畫*/
 @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>

到了這里，關(guān)于css實(shí)現(xiàn)圖標(biāo)閃爍（Element-UI el-badge標(biāo)記組件為例）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！