#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);
}
}
//下面是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);
}
}
一个div用CSS3做的loading动画
最新推荐文章于 2024-04-17 11:29:12 发布