css加载动画...

 1 加载动画...
 2
 3
 4
 5 <p>加载动画...</p>
 6 <p> </p>
 7 <p> </p>
 8 <style><!--
 9 .container {
10         position: absolute;
11         top: 0;
12         left: 0;
13         bottom: 0;
14         right: 0;
15         display: flex;
16         align-items: center;
17         justify-content: center;
18       }
19
20       /* Loading CSS 样式 */
21
22         .boxLoading {
23           width: 50px;
24           height: 50px;
25           margin: auto;
26           position: absolute;
27           left: 0;
28           right: 0;
29           top: 0;
30           bottom: 0;
31         }
32
33       .boxLoading:before {
34         content: ‘‘;
35         width: 50px;
36         height: 5px;
37         background: #000;
38         opacity: 0.1;
39         position: absolute;
40         top: 59px;
41         left: 0;
42         border-radius: 50%;
43         animation: box-loading-shadow 0.5s linear infinite;
44       }
45       .boxLoading:after {
46         content: ‘‘;
47         width: 50px;
48         height: 50px;
49         background: -webkit-linear-gradient(270deg, rgba(33, 127, 199, 1) 0%, rgba(33, 127, 199, 1) 0%, rgba(52, 152, 228, 1) 100%, rgba(52, 152, 228, 1) 100%);
50         background: -moz-linear-gradient(180deg, rgba(33, 127, 199, 1) 0%, rgba(33, 127, 199, 1) 0%, rgba(52, 152, 228, 1) 100%, rgba(52, 152, 228, 1) 100%);
51         background: linear-gradient(180deg, rgba(33, 127, 199, 1) 0%, rgba(33, 127, 199, 1) 0%, rgba(52, 152, 228, 1) 100%, rgba(52, 152, 228, 1) 100%);
52         animation: box-loading-animate 0.5s linear infinite;
53         position: absolute;
54         top: 0;
55         left: 0;
56         border-radius: 3px;
57       }
58
59       @keyframes box-loading-animate {
60         17% {
61           border-bottom-right-radius: 3px;
62         }
63         25% {
64           transform: translateY(9px) rotate(22.5deg);
65         }
66         50% {
67           transform: translateY(18px) scale(1, .9) rotate(45deg);
68           border-bottom-right-radius: 40px;
69         }
70         75% {
71           transform: translateY(9px) rotate(67.5deg);
72         }
73         100% {
74           transform: translateY(0) rotate(90deg);
75         }
76       }
77
78       @keyframes box-loading-shadow {
79         0%, 100% {
80           transform: scale(1, 1);
81         }
82         50% {
83           transform: scale(1.2, 1);
84         }
85       }
86 --></style>
87 <div class="container"><!-- Loading HTML-->
88 <div class="boxLoading"> </div>
89 </div>
90 　　

原文地址：https://www.cnblogs.com/harlem/p/8275392.html