1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <meta charset="utf-8" />
7 <link rel="stylesheet" href="style/style.css">
8 <style>
9 .loader.is-active {
10 background-color: rgba(0,0,0,0.85);
11 width: 100%;
12 height: 100%;
13 left: 0;
14 top: 0;
15 }
16 .loader-ball[shadow]:before { /*css的属性选择器，设置inset向内的阴影*/
17 box-shadow: -5px -5px 10px 0 rgba(0,0,0,0.5) inset;
18 }
19 .loader-ball:before {
20 content: ‘‘;
21 position: absolute;
22 width: 50px;
23 height: 50px;
24 top: 50%;
25 left: 50%;
26 margin: -25px 0 0 -25px;
27 background:linear-gradient(#f70606,rgb(187, 152, 60));/*设置一个从上到下的渐变*/
28 border-radius: 50%;
29 z-index: 1;
30 animation: kick 1s infinite alternate ease-in both; /*infinite无限次播放，alternate基数正播偶数反播，*/
31 }
32 .loader-ball:after {
33 content: ‘‘;
34 position: absolute;
35 background-color: rgba(0,0,0,0.3);
36 border-radius: 50%;
37 width: 45px;
38 height: 20px;
39 top: calc(50% + 10px);/*calc用于计算*/
40 left: 50%;
41 margin: 0 0 0 -22.5px;
42 z-index: 0;
43 animation: shadow 1s infinite alternate ease-out both;
44 }
45 @keyframes shadow {
46 0% {
47 background-color: transparent;
48 transform: scale(0);
49 }
50
51 40% {
52 background-color: transparent;
53 transform: scale(0);
54 }
55
56 95% {
57 background-color: rgba(0,0,0,0.75);
58 transform: scale(1);
59 }
60
61 100% {
62 background-color: rgba(0,0,0,0.75);
63 transform: scale(1);
64 }
65 }
66
67 @keyframes kick {
68 0% {
69 transform: translateY(-80px) scaleX(0.95);
70 }
71
72 90% {
73 border-radius: 50%;
74 }
75
76 100% {
77 transform: translateY(0) scaleX(1);
78 border-radius: 50% 50% 40% 40%;
79 }
80 }
81 </style>
82 </head>
83 <body>
84 <div id="loader" class="loader loader-ball is-active" shadow></div>
85 </body>
86 </html>
时间： 2024-11-05 18:37:37