CSS 阴影闪烁 呼吸灯闪烁 animation动画 keyframe 选择器 动态闪烁 less vue2

环境：vue2

功能：CSS样式添加阴影的时候让阴影部分保持动态闪烁效果 

方案：运用animation动画  实现闪烁，keyframe 选择器更改阴影的颜色

效果：动态闪烁

 

样式书写：

li{
width: 120px;
height: 35px;
line-height: 35px;
background-color: plum;
color: #fff;
margin-bottom: 10px;
animation: shadow 1.5s ease-in-out  infinite;

}
@keyframes shadow {
  0% {

      box-shadow: 0px 0px 4px 4px #ac03e900;
  }

  25% {

      box-shadow: 0px 0px 4px 4px #ac03e970;
  }

  50% {

      box-shadow: 0px 0px 4px 4px #ac03e9ab;
  }

  75% {

      box-shadow: 0px 0px 4px 4px #ac03e970;
  }

  100% {

      box-shadow: 0px 0px 4px 4px #cc90e293;
  }
}

　示例：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <ul>
      <li>芹菜是一根葱1</li>
      <li>芹菜是一根葱2</li>
      <li>芹菜是一根葱3</li>
      <li>芹菜是一根葱4</li>
      <li>芹菜是一根葱5</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeView',
}
</script>

<style lang="less" scoped>
ul,li{
  list-style-type: none;//取消默认样式
  margin: 0 auto;

}
li{
width: 120px;
height: 35px;
line-height: 35px;
background-color: plum;
color: #fff;
margin-bottom: 10px;
animation: shadow 1.5s ease-in-out  infinite;

}
@keyframes shadow {
  0% {

      box-shadow: 0px 0px 4px 4px #ac03e900;
  }

  25% {

      box-shadow: 0px 0px 4px 4px #ac03e970;
  }

  50% {

      box-shadow: 0px 0px 4px 4px #ac03e9ab;
  }

  75% {

      box-shadow: 0px 0px 4px 4px #ac03e970;
  }

  100% {

      box-shadow: 0px 0px 4px 4px #cc90e293;
  }
}

</style>