最近项目需要做的一个动画是模拟雷达，下面先看ui同学给我们看的gif图
旋转开锁背景.gif而真实项目需要的是这样的：
Paste_Image.png想法：
1、先做一个中心
2、先做出来一圈，那么其他的圈还难吗
3、阴影大小的变化以及透明度的变化
实现
<div class="{{ID}} ox">
<div class="single">
<em></em>
<span class="sing-com one"></span>
<span class="sing-com two"></span>
<span class="sing-com three"></span>
</div>
</div>
.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、<div class="single">为中心的蓝色背景块
2、<span class="sing-com one"></span>就是从里往外的第一圈，首先要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前面为什么要加浏览器前缀?
-webkit//Webkit内核，例如谷歌和Safari浏览器
-moz//Gecko内核，例如火狐浏览器
-o//Presto内核，例如Opera浏览器
-ms//Trident内核，例如IE浏览器
据阮一峰的2014年的博客说IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀
疑问
如果@keyframes前面已经加了浏览器前缀，那么里面的样式比如transform还需要加前缀吗反之呢?本想找个低版本的浏览器验证一下。但下载下来都比较高。