擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

最近公司實在是太忙了，996的日子（當前時間凌晨2019-01-06 02:04），所以更新也少了，希望大家多體諒一下，在此對小伙伴們說聲抱歉。

前幾天接到小伙伴投稿，希望做一個類似loading的效果，也是只要手頭有空就趕緊寫寫，今天終于給做好了，非常感謝"月球居民愛麗絲"的投稿。

原件預覽圖：

效果解析

從效果而言，我們主要實現下列步驟： 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; 
}

最終效果預覽：

總結

還是那句“萬丈高樓平地起”，要善于問題分解，一步一步來，不要想著一口一個胖子，飯的慢慢吃。按步驟是不是發現超級簡單就可以搞定？

再次感謝"月球居民愛麗絲"同學，也期待更多人的投稿。

陌生人，2019年好好加油，我看好你。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址請點擊下方“了解更多”