css3 模拟雷达动画

最近项目需要做的一个动画是模拟雷达，下面先看ui同学给我们看的gif图

旋转开锁背景.gif

而真实项目需要的是这样的：

Paste_Image.png

想法：

1、先做一个中心
2、先做出来一圈，那么其他的圈还难吗
3、阴影大小的变化以及透明度的变化

实现

  .single {
    width: 3.8rem;
    height: 3.8rem;
    position: relative;
    background-color: #fff;
    border-radius: 50%;
    left: 50%;
    margin-left: -1.9rem;
  }

  .sing-com {
    position: absolute; 
    border-radius: 50%; 
    top: 50%; 
    left: 50%; 
    opacity: 1; 
  }
  .one { 
    width: 1.9rem; 
    height: 1.9rem; 
    box-shadow: 0 0 1px 0.15rem rgba(202,220,255,0.8); 
    margin-top: -0.95rem;
    margin-left: -0.95rem; 
    z-index: 2;
    -webkit-animation: halo 1s 0.5s infinite ease-out;
  }

  .two { 
    width: 2.2rem; 
    height: 2.2rem; 
    box-shadow: 0 0 1px 0.3rem rgba(202,220,255,0.6); 
    margin-top: -1.1rem; 
    margin-left: -1.1rem; 
    z-index: 2;
    -webkit-animation: halo2 1s 0.5s infinite ease-out;
  }

  .three { 
    width: 2.8rem; 
    height: 2.8rem; 
    box-shadow: 0 0 1px 0.3rem rgba(202,220,255,0.4); 
    margin-top: -1.4rem; 
    margin-left: -1.4rem; 
    z-index: 2;
    -webkit-animation: halo3 1s 0.5s infinite ease-out;
  }

  .single em {
      width: 1.9rem;
      height: 1.9rem;
      margin: 0 auto;
      background: #cadcff;
      cursor: pointer;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -0.95rem 0 0 -0.95rem;
      border-radius: 50%;
  }

  @keyframes halo {
    0% { 
      opacity: 0; 
      box-shadow: 0 0 1px 0.15rem rgba(202,220,255,0.8);
    }
    50% {opacity: 1; }
    100%{
      opacity: 0.6;
      box-shadow: 0 0 1px 0.30rem rgba(202,220,255,0.8);
    } 
  }

  @keyframes halo2 {
    0% { 
      opacity: 0; 
      box-shadow: 0 0 1px 0.15rem rgba(202,220,255,0.6); 
      width: 2.18rem; height: 2.18rem; margin-top: -1.09rem; margin-left: -1.09rem;
    }
    50% {opacity: 1; }
    100%{
      opacity: 0.3;
      box-shadow: 0 0 1px 0.30rem rgba(202,220,255,0.6); 
      width: 2.48rem; 
      height: 2.48rem; 
      margin-top: -1.24rem; 
      margin-left: -1.24rem;
    } 
  }
  @keyframes halo3 {
    0% { 
      opacity: 0; 
      box-shadow: 0 0 1px 0.15rem rgba(202,220,255,0.4); 
      width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; margin-left: -1.25rem;
    }
    50% {opacity: 1; }
    100%{
      opacity: 0.3;
      box-shadow: 0 0 1px 0.3rem rgba(202,220,255,0.4); 
      width: 3.06rem; 
      height: 3.06rem; 
      margin-top: -1.53rem; 
      margin-left: -1.53rem;
    } 
  }

分解

1、

为中心的蓝色背景块
2、就是从里往外的第一圈，首先要position:absoltue定位实现
3、定义动画的名字为halo @kayframes halo

透明度的渐变，从完全透明到不透明，最后有一点透明
box-shadow 通过控制阴影的大小，来实现光圈向外扩散的效果

4、调用动画-webkit-animation: halo 1s 0.5s infinite ease-out;
5、三个光圈不调用一个halo，是因为每个光圈的动画都有差别。在two和three里面都加入宽度和高度的变化是因为光圈向外扩散的时候，如果外面的圈位置不变会导致两个光圈重叠。
6、要显示半个圆的做法是将外面在加一个div，高度设置为圆圈的一半，然后overflow:hidden;
7、雷达图上面小点点的动画是延迟几毫秒再有一个透明度的变化

详解

• 动画的形成：是使元素从一种样式逐渐变化为另一种样式的效果，在动画过程中，可以更改CSS样式的设定多次

• @keyframes 为css定义动画的固定写法，后面跟定义的名字。keyframes中文是关键帧的意思，学过flash的同学应该知道，动画都是由帧组成的。

• @keyframes animationname的name是必须值，以便使用animation属性来控制

• keyframes-selector 必须值，可以写成from...to...也可以写成0%-100%。0%相当于from，100%相当于to。例如：

@keyframes halo {
    0% { 
      opacity: 0; 
      transform: scale(1); 
      box-shadow: 0 0 1px 0.15rem rgba(202,220,255,0.8);
    }
    50% {opacity: 1; }
    100%{
      opacity: 0.6;
      transform: scale(1); 
      box-shadow: 0 0 1px 0.30rem rgba(202,220,255,0.8);
    } 
  }

• animation: halo 1s 0.5s infinite ease-out;
  animation用于设置动画的名称以及属性，halo即为名称；
  1s规定动画在1s内完成；
  0.5s规定动画0.5s后再开始执行也就是延迟的作用；
  infinite是动画重复的次数是无限次也就是无限循环模式（如果不想循环可以设置成数字代表执行几次，默认为1次）；
  ease-out是运动的曲线方式规定以慢速结束的过渡效果相对应的还有ease-in等

扩展

• 在keyframes前面为什么要加浏览器前缀?

豆瓣前端工程师回答：css标准中各个属性也要经历从草案(WD)到推荐(REC)的过程，css3中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险，同时也会出现有的浏览器厂商支持的好，有的支持的不好，所以就用厂商前缀加以区分。如果已经成为REC或者接近REC那么就不需要加前缀了。
css标准的进展https://link.zhihu.com/?target=http%3A//www.w3.org/Style/CSS/current-work

-webkit//Webkit内核，例如谷歌和Safari浏览器
-moz//Gecko内核，例如火狐浏览器
-o//Presto内核，例如Opera浏览器
-ms//Trident内核，例如IE浏览器

据阮一峰的2014年的博客说IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀

疑问

如果@keyframes前面已经加了浏览器前缀，那么里面的样式比如transform还需要加前缀吗反之呢?本想找个低版本的浏览器验证一下。但下载下来都比较高。