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

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

}

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 731评论 0 2
  • HTML 代码: 效果1 css .spinner { width:60px; height:60px; back...
    老牛圣斗士阅读 2,224评论 0 0
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 6,570评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 800评论 0 9
  • 我深深地爱着你 就这样 含情默默 凝视 我深深地爱着你 就这样 静静地 守候 我深深地爱着你 就这样 放弃食欲 静...
    舒洁湲阅读 118评论 2 5