.直接上效果
1.html内容
<div class="outDiv">
<img src="../img/xinhao.png" />
<div class="blingbling"></div>
<div class="blingbling2"></div>
</div>
2.样式内容
.outDiv{
width:430px;
height:430px;
display: flex;
justify-content: center;
align-items: center;
margin-left:200px;
margin-top:200px;
}
.blingbling{
border: 36px solid #73BF00;
width: 160px;
height: 160px;
border-radius: 50%;
position: absolute;
-webkit-animation: scaleout 2.5s infinite ease-in-out;
animation: scaleout 2.5s infinite ease-in-out;
}
.blingbling2{
border: 36px solid #70B400;
width: 88px;
height: 88px;
border-radius: 50%;
position: absolute;
-webkit-animation: scaleout 2.5s infinite ease-in-out;
animation: scaleout 2.5s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale(1.0) }
100% {
-webkit-transform: scale(1.1);
opacity: 0;
}
}
@keyframes scaleout {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
100% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0;
}
}
其中1.3s是闪烁的频率,宽高自己调整,祝你开发愉快~