原件预览图：效果解析从效果而言，我们主要实现下列步骤：1、让一个圆旋转，并且是先快后慢;2、有颜色过渡效果、并且有透明度;3、然后就是复制上面的效果，5个，然后按时间执行动画好了，开始我们的表演第一步-一个圆旋转css画一个圆很简单，div设置宽高，用border-radius:100%就可以轻松实现。看看我的解决方案：<div><div></div></div>用一个盒子，装住圆，盒子比圆大。所以，我们操作box下面的div，添加颜色过渡动画，并添加透明度。
点击右上方红色按钮关注“web秀”，让你真正秀起来
前言最近公司实在是太忙了，996的日子（当前时间凌晨2019-01-06 02:04），所以更新也少了，希望大家多体谅一下，在此对小伙伴们说声抱歉。
前几天接到小伙伴投稿，希望做一个类似loading的效果，也是只要手头有空就赶紧写写，今天终于给做好了，非常感谢"月球居民爱丽丝"的投稿。
原件预览图：
效果解析从效果而言，我们主要实现下列步骤： 1、让一个圆旋转，并且是先快后慢; 2、有颜色过渡效果、并且有透明度; 3、然后就是复制上面的效果，5个，然后按时间执行动画
好了，开始我们的表演
第一步 - 一个圆旋转css画一个圆很简单，div设置宽高，用border-radius:100%就可以轻松实现。但是实现一个圆，旋转，并且不是绕自己的圆心旋转（绕自己的圆心旋转看不出来效果）是个问题，怎么解决了？
看看我的解决方案：
<div ><div ></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 ><div ><div ></div></div><div ><div ></div></div><div ><div ></div></div><div ><div ></div></div><div ><div ></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.4scubic-bezier(.23,1.02,.44,.9);z-index: 4; } .box2{/* 2s完成 */animation: trotate 2.2scubic-bezier(.23,1.02,.44,.9);/* 延时1.2s执行 */animation-delay: .6s;z-index: 3; } .box3{animation: trotate 2scubic-bezier(.23,1.02,.44,.9);animation-delay: 1.2s;z-index: 2; } .box4{animation: trotate 1.8scubic-bezier(.23,1.02,.44,.9);animation-delay: 1.8s;z-index: 1; } .box5{animation: trotate 1.6scubic-bezier(.23,1.02,.44,.9);animation-delay: 2.4s;z-index: 1; } /*box1应用颜色、透明度过渡动画*/ .box1 div{animation: acolor1 2.4scubic-bezier(.23,1.02,.44,.9);background: #1199ff;opacity: 0.7; } .box2 div{animation: acolor2 2.2scubic-bezier(.23,1.02,.44,.9);animation-delay: .6s;background: #46b0ff;opacity: 0.7; } .box3 div{animation: acolor3 2scubic-bezier(.23,1.02,.44,.9);animation-delay: 1.2s;background: #32bbff;opacity: 0.7; } .box4 div{animation: acolor4 1.8scubic-bezier(.23,1.02,.44,.9);animation-delay: 1.8s;background: #00dbc2;opacity: 0.7; } .box5 div{animation: acolor4 1.6scubic-bezier(.23,1.02,.44,.9);animation-delay: 2.4s;background: #00dbc2;opacity: 0.7; }
最终效果预览：
总结还是那句“万丈高楼平地起”，要善于问题分解，一步一步来，不要想着一口一个胖子，饭的慢慢吃。按步骤是不是发现超级简单就可以搞定？
再次感谢"月球居民爱丽丝"同学，也期待更多人的投稿。
陌生人，2019年好好加油，我看好你。
公告喜欢小编的点击关注，了解更多知识！
源码地址请点击下方“了解更多”
,
