點擊右上方紅色按鈕關注“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年好好加油，我看好你。

公告

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

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部