样式一:
<div class="point point-flicker" >
</div>
.point {
width: 38px;
height: 38px;
background-color: #2ea598;
position: relative;
border-radius: 50%;
}
/* 设置动画前颜色 */
.point-flicker:after {
background-color: #61d3ff;
}
/* 设置动画后颜色 */
.point-flicker:before {
background-color: rgba(0, 168, 253, 0.2);
}
/* 设置动画 */
.point-flicker:before,
.point-flicker:after {
content: '';
width: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
border-radius: 50%;
animation: warn 1.5s ease-out 0s infinite;
}
@keyframes warn {
0% {
transform: scale(0.5);
opacity: 1;
}
30% {
opacity: 1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
样式二:
<div :class="[ 'pointStyle',
{
green: item.state == '正常',
red: item.state == '出错',
gray: item.state == '待检'
},
]"
></div>
.pointStyle {
width: 28px;
height: 28px;
background-color: #37c7ff;
border-radius: 50%;
&.green {
background-color: #37ff66;
-webkit-animation: twinkling 0.2s infinite ease-in-out;
}
&.gray {
background-color: #cfcedf;
-webkit-animation: twinkling 0.2s infinite ease-in-out;
}
&.red {
background-color: #ff5555;
-webkit-animation: twinkling 0.2s infinite ease-in-out;
}
}
@-webkit-keyframes twinkling {
/*透明度由0到1*/
0% {
opacity: 0.4; /*透明度为0*/
}
50% {
opacity: 0.8; /*透明度为0*/
}
100% {
opacity: 1; /*透明度为1*/
}
}
网友评论