css实现Ant Design中菊花图loading效果

一、布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<body>
<div>
<span>
<i></i><i></i><i></i><i></i>
</span>
</div>

</body>
<style>
span {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
margin-top: 10px
}

span i {
position: absolute;
width: 9px;
height: 9px;
transform: scale(0.75);
border-radius: 100%;
background: cornflowerblue;
opacity: 0.3;
display: block;
}

span i:nth-child(1) {
left: 0;
top: 0;
}

span i:nth-child(2) {
right: 0;
top: 0;
}

span i:nth-child(3) {
right: 0;
bottom: 0;
}

span i:nth-child(4) {
left: 0;
bottom: 0;
}

</style>

现在我们看一下布局后的样式

二、动画

我们初始的时候设置的圆圈透明度是0.3，之后我们通过依次改变每一个小圆圈的透明度为1来实现加载的效果，为了让加载的动画更加明显，我们同时加入整个元素旋转的动画，下面是菊花 loading的所有的样式设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

span {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
animation: myrotate 1.8s infinite linear;
margin-top: 10px
}

span i {
position: absolute;
width: 9px;
height: 9px;
transform: scale(0.75);
border-radius: 100%;
background: cornflowerblue;
opacity: 0.3;
display: block;
animation: myopacity 1s infinite linear;
}

span i:nth-child(1) {
left: 0;
top: 0;
}

span i:nth-child(2) {
right: 0;
top: 0;
animation-delay: 0.4s;
}

span i:nth-child(3) {
right: 0;
bottom: 0;
animation-delay: 0.8s;
}

span i:nth-child(4) {
left: 0;
bottom: 0;
animation-delay: 1.2s;
}

@keyframes myrotate {
to {
transform: rotate(450deg);
}
}

@keyframes myopacity {
to {
opacity: 1;
}
}