主要是思路是:先定義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)}
}