1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 .dot {
8 display: flex;
9 flex-wrap: wrap;
10 width: 56px;
11 height: 56px;
12 transform: rotate(45deg);
13 animation: ant-rotate 1.2s infinite linear;
14 }
15
16 .dot i {
17 margin: 2px;
18 border-radius: 50%;
19 width: 24px;
20 height: 24px;
21 background-color: #fc52ff;
22 opacity: 0.3;
23 animation: ant-spin-move 1s infinite linear alternate;
24 }
25
26 .dot i:nth-child(2) {
27 animation-delay: 0.4s;
28 }
29
30 .dot i:nth-child(3) {
31 animation-delay: 0.8s;
32 }
33
34 .dot i:nth-child(4) {
35 animation-delay: 1.2s;
36 }
37
38 @keyframes ant-rotate {
39 100% {
40 transform: rotate(405deg);
41 }
42 }
43
44 @keyframes ant-spin-move {
45 100%{
46 opacity: 1;
47 }
48 }
49
50 .loading-wrap {
51 display: flex;
52 flex-direction: column;
53 justify-content: center;
54 align-items: center;
55 width: 100%;
56 height: 90vh;
57 background-color: rgba(0, 0, 0, .1);
58 }
59 i {
60 font-style: italic;
61 }
62 </style>
63 </head>
64 <body>
65 <div class="loading-wrap">
66 <div class="dot"><i></i><i></i><i></i><i></i></div>
67 </div>
68 </body>
69 </html>
标签：flex,loading,效果,ant,nth,animation,rotate,dot From： https://www.cnblogs.com/xmyfsj/p/18054238