击右上方红色按钮关注“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年好好加油，我看好你。

公告

喜欢小编的点击关注，了解更多知识！

源码地址请点击下方“了解更多”