原件预览图：
效果解析
从效果而言，我们主要实现下列步骤： 1、让一个圆旋转，并且是先快后慢; 2、有颜色过渡效果、并且有透明度; 3、然后就是复制上面的效果，5个，然后按时间执行动画
好了，开始我们的表演
第一步 - 一个圆旋转
css画一个圆很简单，div设置宽高，用border-radius:100%就可以轻松实现。但是实现一个圆，旋转，并且不是绕自己的圆心旋转（绕自己的圆心旋转看不出来效果）是个问题，怎么解决了？
看看我的解决方案：
<div class="shadow-box box1">
<div class="shadow"></div>
</div>用一个盒子，装住圆，盒子比圆大。圆最水平居中，盒子顶部，然后旋转盒子，就可以搞定圆的选择效果。
代码语言：javascript复制.shadow-box{
position: absolute;
width: 260px;
height: 260px;
border: 1px solid;
left: 200px;
}
.shadow-box div{
position: absolute;
background: #1199ff;
width: 50px;
height: 50px;
border-radius: 100%;
float: right;
left: 50%;
margin-left: -25px;
}
@keyframes trotate{
/*动画开始第一帧*/
from {
/*transform: rotate旋转，2.4s内从0°过渡到360°*/
transform: rotate(0deg);
}
/*动画结束最后一帧*/
to {
transform: rotate(360deg);
}
}
.box1{
/*动画：2.4s执行完毕，cubic-bezier贝塞尔曲线（先快后慢）*/
animation: trotate 2.4s cubic-bezier(.23,1.02,.44,.9);
}第二步 - 颜色过渡
颜色过渡和旋转基本一样，不过颜色并不是作用盒子，而是圆。所以，我们操作box下面的div，添加颜色过渡动画，并添加透明度。
代码语言：javascript复制@keyframes acolor1{
from {
background: #1199ff;
opacity: 0.7;
}
to {
background: #c837ed;
opacity: 0.2;
}
}
.box1 div{
animation: acolor1 2.4s cubic-bezier(.23,1.02,.44,.9);
background: #1199ff;
opacity: 0.7;
}第三步 - copy
代码语言：javascript复制<div class="loading">
<div class="shadow-box box1">
<div class="shadow"></div>
</div>
<div class="shadow-box box2">
<div class="shadow"></div>
</div>
<div class="shadow-box box3">
<div class="shadow"></div>
</div>
<div class="shadow-box box4">
<div class="shadow"></div>
</div>
<div class="shadow-box box5">
<div class="shadow"></div>
</div>
</div>我们复制5个，并用box1-box5来区分
代码语言：javascript复制.shadow-box{
position: absolute;
width: 260px;
height: 260px;
/* border: 1px solid; */ /*去掉边框*/
left: 200px;
}
.shadow-box div{
position: absolute;
width: 50px;
height: 50px;
border-radius: 100%;
float: right;
left: 50%;
margin-left: -25px;
}
/*旋转动画*/
@keyframes trotate
{
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
/*box1颜色、透明度过渡动画*/
@keyframes acolor1
{
from {
background: #1199ff;
opacity: 0.7;
}
to {
background: #c837ed;
opacity: 0.2;
}
}
@keyframes acolor2
{
from {
background: #46b0ff;
opacity: 0.7;
}
to {
background: #9e79db;
opacity: 0.2;
}
}
@keyframes acolor3
{
from {
background: #32bbff;
opacity: 0.7;
}
to {
background: #f577a8;
opacity: 0.2;
}
}
@keyframes acolor4
{
from {
background: #00dbc2;
opacity: 0.7;
}
to {
background: #ff745a;
opacity: 0.2;
}
}
@keyframes acolor5
{
from {
background: #00dbc2;
opacity: 0.7;
}
to {
background: #ff745a;
opacity: 0.2;
}
}
/*box1应用旋转动画*/
/**
* box1 2.4s
* box2 2.2s完成 延时0.6s执行
* box3 2s完成 延时1.2s执行
* ...
* 时间依次减少，动画效果也就是越来越快
* 能追上上面一个动画
*/
.box1{
animation: trotate 2.4s
cubic-bezier(.23,1.02,.44,.9);
z-index: 4;
}
.box2{
/* 2s完成 */
animation: trotate 2.2s
cubic-bezier(.23,1.02,.44,.9);
/* 延时1.2s执行 */
animation-delay: .6s;
z-index: 3;
}
.box3{
animation: trotate 2s
cubic-bezier(.23,1.02,.44,.9);
animation-delay: 1.2s;
z-index: 2;
}
.box4{
animation: trotate 1.8s
cubic-bezier(.23,1.02,.44,.9);
animation-delay: 1.8s;
z-index: 1;
}
.box5{
animation: trotate 1.6s
cubic-bezier(.23,1.02,.44,.9);
animation-delay: 2.4s;
z-index: 1;
}
/*box1应用颜色、透明度过渡动画*/
.box1 div{
animation: acolor1 2.4s
cubic-bezier(.23,1.02,.44,.9);
background: #1199ff;
opacity: 0.7;
}
.box2 div{
animation: acolor2 2.2s
cubic-bezier(.23,1.02,.44,.9);
animation-delay: .6s;
background: #46b0ff;
opacity: 0.7;
}
.box3 div{
animation: acolor3 2s
cubic-bezier(.23,1.02,.44,.9);
animation-delay: 1.2s;
background: #32bbff;
opacity: 0.7;
}
.box4 div{
animation: acolor4 1.8s
cubic-bezier(.23,1.02,.44,.9);
animation-delay: 1.8s;
background: #00dbc2;
opacity: 0.7;
}
.box5 div{
animation: acolor4 1.6s
cubic-bezier(.23,1.02,.44,.9);
animation-delay: 2.4s;
background: #00dbc2;
opacity: 0.7;
}最终效果预览：
