一个DIV做的LODING动画CSS3动画

来源：互联网发布：阿里云域名优惠码编辑：程序博客网时间：2024/04/30 03:40

#loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow:
0 -30px 0 0 #bbb,
15px -26px 0 0 #aaa,
26px -15px 0 0 #999,
30px 0 0 0 #888,
26px 15px 0 0 #777,
15px 26px 0 0 #666,
0 30px 0 0 #555,
-15px 26px 0 0 #444,
-26px 15px 0 0 #333,
-30px 0 0 0 #222,
-26px -15px 0 0 #111,
-15px -26px 0 0 #000;
animation: loading 1s infinite steps(12, start);
}

@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

这个可以不用图片gif,而且可以动态改变颜色，非常完美！应该申请专利！哈哈哈。

用scss结合，不能再完美！

.x-mask-msg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 10px;
height: 10px;
border-radius: 50%;
padding: 4px;
background:none;
box-shadow:
0 -30px 0 0 lighten($base-color,60%),
15px -26px 0 0 lighten($base-color,50%),
26px -15px 0 0 lighten($base-color,40%),
30px 0 0 0 lighten($base-color,30%),
26px 15px 0 0 lighten($base-color,20%),
15px 26px 0 0 lighten($base-color,10%),
0 30px 0 0 $base-color,
-15px 26px 0 0 darken($base-color,3%),
-26px 15px 0 0 darken($base-color,6%),
-30px 0 0 0 darken($base-color,9%),
-26px -15px 0 0 darken($base-color,12%),
-15px -26px 0 0 darken($base-color,15%);
animation: loading 0.2s infinite steps(12, start);
}

@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

1111

优点是秒杀gif,

1、节省资源：100k—>1k;

2、可动态改变颜色，可拓展！

0 0