利用css的delay延迟以及旋转动画效果实现彩虹条加载动画，纯css没有一行js代码，喜欢的搞起来。
HTML结构：
CSS结构
body {
background-color:#000;
}
.box {
position:relative;
width:100px;
height:50px;
overflow:hidden;
margin:0 auto;
}
.box .wrap {
overflow:hidden;
position:absolute;
margin:0 auto;
left:0;
right:0;
transform-origin:50% bottom;
-webkit-transform-origin:50% bottom;
}
.box .wrap div {
border-radius:50%;
box-sizing:border-box;
margin:0 auto;
}
.box .wrap:first-child div {
width:100px;
height:100px;
border:5px solid red;
animation:loading 1.5s infinite ease-in;
}
.box .wrap:nth-child(2) div {
width:80px;
height:80px;
border:5px solid yellow;
animation:loading 1.5s 100ms infinite ease-in;
}
.box .wrap:nth-child(3) div {
width:60px;
height:60px;
border:5px solid green;
animation:loading 1.5s 200ms infinite ease-in;
}
.box .wrap:nth-child(4) div {
width:40px;
height:40px;
border:5px solid blue;
animation:loading 1.5s 200ms infinite ease-in;
}
.box .wrap:nth-child(5) div {
width:20px;
height:20px;
border:5px solid brown;
animation:loading 1.5s 200ms infinite ease-in;
}
.box .wrap:nth-child(1) {
width:100px;
height:50px;
top:0;
animation:loading 1.5s infinite ease-in;
}
.box .wrap:nth-child(2) {
top:10px;
width:80px;
height:40px;
/* overflow:hidden;
*/
animation:loading 1.5s 100ms infinite ease-in;
}
.box .wrap:nth-child(3) {
top:20px;
width:60px;
height:30px;
/* overflow:hidden;
*/
animation:loading 1.5s 200ms infinite ease-in;
}
.box .wrap:nth-child(4) {
top:30px;
width:40px;
height:20px;
/* overflow:hidden;
*/
animation:loading 1.5s 300ms infinite ease-in;
}
.box .wrap:nth-child(5) {
top:40px;
width:20px;
height:10px;
/* overflow:hidden;
*/
animation:loading 1.5s 400ms infinite ease-in;
}
@keyframes loading {
0% {
transform:rotate(0);
}
100% {
transform:rotate(360deg);
}
}
最终GIF效果展示：
扫一扫
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
