Warning: Undefined array key "adf" in /www/wwwroot/blog.5iux.cn/wp-content/plugins/rejected-wp-keyword-link-rejected/wp_similarity.php on line 41
Warning: Undefined array key "sim_pages" in /www/wwwroot/blog.5iux.cn/wp-content/plugins/rejected-wp-keyword-link-rejected/wp_similarity.php on line 42
在Pinterest上看到一张loading图，如下，忽然想把它用css写出来，于是就写了。。。
可能实现效果不一定完全一模一样，权当是娱乐了。
原图：
实现后效果（完整见页尾）：
代码实现：
1.html部分
<div class="ccle">
<b><span><i></i></span></b>
<b><span><i></i></span></b>
<b><span><i></i></span></b>
<b><span><i></i></span></b>
<b><span><i></i></span></b>
<b><span><i></i></span></b>
<b><span><i></i></span></b>
<b><span><i></i></span></b>
</div>
2.CSS部分：
*{ padding: 0; margin: 0 }
html,body{ width: 100%; height: 100%; overflow: hidden; background: #333; }
.ccle{ width:260px; height: 260px; position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
b{ overflow: hidden; display: block; position: absolute;left: 0; right: 0; top:0; bottom: 0; margin: auto; }
b span{ display: block; width: 100%; height: 50%; float: left; overflow: hidden; }
b i{border-radius: 50%; display: block; width: calc(100% - 16px); height: calc(200% - 16px); float: left; border-width: 8px; border-style: solid; }
b:nth-child(1){ width: 100%; height: 100%; animation: ccle8 2.5s ease-in-out infinite;}
b:nth-child(1) i{ border-color: #629;}
b:nth-child(2){ width: calc(100% - 30px); height: calc(100% - 30px); animation: ccle7 2.5s ease-in-out infinite;}
b:nth-child(2) i{ border-color: #c28;}
b:nth-child(3){ width: calc(100% - 60px); height: calc(100% - 60px); animation: ccle6 2.5s ease-in-out infinite; }
b:nth-child(3) i{ border-color: #e25;}
b:nth-child(4){ width: calc(100% - 90px); height: calc(100% - 90px); animation: ccle5 2.5s ease-in-out infinite;}
b:nth-child(4) i{ border-color: #f53;}
b:nth-child(5){ width: calc(100% - 120px); height: calc(100% - 120px); animation: ccle4 2.5s ease-in-out infinite;}
b:nth-child(5) i{ border-color: #fb2;}
b:nth-child(6){ width: calc(100% - 150px); height: calc(100% - 150px); animation: ccle3 2.5s ease-in-out infinite;}
b:nth-child(6) i{ border-color: #8c4;}
b:nth-child(7){ width: calc(100% - 180px); height: calc(100% - 180px); animation: ccle2 2.5s ease-in-out infinite;}
b:nth-child(7) i{ border-color: #0a9;}
b:nth-child(8){ width: calc(100% - 210px); height: calc(100% - 210px); animation: ccle1 2.5s ease-in-out infinite; }
b:nth-child(8) i{ border-color: #17b;}
@keyframes ccle1{
0% { transform: rotate(0deg); }
100% {transform: rotate(360deg);}
}
@keyframes ccle2{
0% { transform: rotate(0deg); }
100% {transform: rotate(720deg);}
}
@keyframes ccle3{
0% { transform: rotate(0deg); }
100% {transform: rotate(1080deg);}
}
@keyframes ccle4{
0% { transform: rotate(0deg); }
100% {transform: rotate(1440deg);}
}
@keyframes ccle5{
0% { transform: rotate(0deg); }
100% {transform: rotate(1800deg);}
}
@keyframes ccle6{
0% { transform: rotate(0deg); }
100% {transform: rotate(2160deg);}
}
@keyframes ccle7{
0% { transform: rotate(0deg); }
100% {transform: rotate(2520deg);}
}
@keyframes ccle8{
0% { transform: rotate(0deg); }
100% {transform: rotate(2880deg);}
}
完整demo：
