原件預覽圖：
效果解析
從效果而言，我們主要實作下列步驟：
1、讓一個圓旋轉，并且是先快後慢;
2、有顔色過渡效果、并且有透明度;
3、然後就是複制上面的效果，5個，然後按時間執行動畫
好了，開始我們的表演
第一步 - 一個圓旋轉
css畫一個圓很簡單，div設定寬高，用
border-radius:100%
就可以輕松實作。但是實作一個圓，旋轉，并且不是繞自己的圓心旋轉（繞自己的圓心旋轉看不出來效果）是個問題，怎麼解決了？
看看我的解決方案：
<div class="shadow-box box1">
<div class="shadow"></div>
</div> 複制
用一個盒子，裝住圓，盒子比圓大。圓最水準居中，盒子頂部，然後旋轉盒子，就可以搞定圓的選擇效果。
.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，添加顔色過渡動畫，并添加透明度。
@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
<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來區分
.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;
} 複制
最終效果預覽：