美文网首页
css实现地图雷达的显示效果(css3 animate 动画)

css实现地图雷达的显示效果(css3 animate 动画)

作者: 编程知识圈 | 来源:发表于2017-08-30 21:16 被阅读0次

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

}

相关文章

网友评论

      本文标题:css实现地图雷达的显示效果(css3 animate 动画)

      本文链接:https://www.haomeiwen.com/subject/kznxjxtx.html