环境：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>
