ant loading效果实现 

 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>

 

posted @ 2024-03-05 15:52  热心市民~菜先生  阅读(103)  评论(0)    收藏  举报