主要是思路是:先定义2~3个div,每个 div做为一个雷达圈,雷达圈其实就是div的border属性,把border定义成圆形,然后通过使用animation动画属通过延时属性值来使雷达波一层一层的往外扩大,其实每个雷达波圈就是一个div的border。
div:afte{
width:100px;
height:100px;
rcontent:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border-radius:50%;
border:2px solid#00cdec;
opacity:0;
-webkit-animation:ripple 4.5 sease-out .9s infinite;
animation:ripple 4.5 sease-out .9s infinite;
@keyframes ripple{
0%{opacity:0;-webkit-transform:scale(.1);transform:scale(.1)}
5%{opacity:1}
to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
}