10種CSS3實現的loading動畫，挑一個走吧？

靜就是空發表於2020-11-30
CSSS3動畫

這篇文章主要介紹了10種CSS3實現的loading動畫，幫助大家更好的美化自身網頁，完成需求，感興趣的朋友可以瞭解下。

HTML：

 

 

 

 

 1 <body>
 2   <div class="content">
 3     <h3>CSS3 Loading animations</h3>
 4     <div class="load-wrapp">
 5       <div class="load-1">
 6         <p>Loading 1</p>
 7         <div class="line"></div>
 8         <div class="line"></div>
 9         <div class="line"></div>
10       </div>
11     </div>
12     <div class="load-wrapp">
13       <div class="load-2">
14         <p>Loading 2</p>
15         <div class="line"></div>
16         <div class="line"></div>
17         <div class="line"></div>
18       </div>
19     </div>
20     <div class="load-wrapp">
21       <div class="load-3">
22         <p>Loading 3</p>
23         <div class="line"></div>
24         <div class="line"></div>
25         <div class="line"></div>
26       </div>
27     </div>
28     <div class="load-wrapp">
29       <!-- Loading 4 don't work on firefox because of the border-radius and the "dashed" style. -->
30       <div class="load-4">
31         <p>Loading 4</p>
32         <div class="ring-1"></div>
33       </div>
34     </div>
35     <div class="load-wrapp">
36       <div class="load-5">
37         <p>Loading 5</p>
38         <div class="ring-2">
39           <div class="ball-holder">
40             <div class="ball"></div>
41           </div>
42         </div>
43       </div>
44     </div>
45     <div class="load-wrapp">
46       <div class="load-6">
47         <p>Loading 6</p>
48         <div class="letter-holder">
49           <div class="l-1 letter">L</div>
50           <div class="l-2 letter">o</div>
51           <div class="l-3 letter">a</div>
52           <div class="l-4 letter">d</div>
53           <div class="l-5 letter">i</div>
54           <div class="l-6 letter">n</div>
55           <div class="l-7 letter">g</div>
56           <div class="l-8 letter">.</div>
57           <div class="l-9 letter">.</div>
58           <div class="l-10 letter">.</div>
59         </div>
60       </div>
61     </div>
62     <div class="load-wrapp">
63       <div class="load-7">
64         <p>Loading 7</p>
65         <div class="square-holder">
66           <div class="square"></div>
67         </div>
68       </div>
69     </div>
70     <div class="load-wrapp">
71       <div class="load-8">
72         <p>Loading 8</p>
73         <div class="line"></div>
74       </div>
75     </div>
76     <div class="load-wrapp">
77       <div class="load-9">
78         <p>Loading 9</p>
79         <div class="spinner">
80           <div class="bubble-1"></div>
81           <div class="bubble-2"></div>
82         </div>
83       </div>
84     </div>
85     <div class="load-wrapp">
86       <div class="load-10">
87         <p>Loading 10</p>
88         <div class="bar"></div>
89       </div>
90     </div>
91   </div>
92   <div class="clear"></div>
93 </body>

 CSS3：

  1 /* -----------------------------------------
  2   =Default css to make the demo more pretty
  3 -------------------------------------------- */
  4 
  5 body {
  6   margin: 0 auto;
  7   padding: 20px;
  8   max-width: 1200px;
  9   overflow-y: scroll;
 10   font-family: "Open Sans", sans-serif;
 11   font-weight: 400;
 12   color: #777;
 13   background-color: #f7f7f7;
 14   -webkit-font-smoothing: antialiased;
 15   -webkit-text-size-adjust: 100%;
 16   -ms-text-size-adjust: 100%;
 17 }
 18 
 19 .content {
 20   padding: 15px;
 21   overflow: hidden;
 22   background-color: #e7e7e7;
 23   background-color: rgba(0, 0, 0, 0.06);
 24 }
 25 
 26 h1 {
 27   padding-bottom: 15px;
 28   border-bottom: 1px solid #d8d8d8;
 29   font-weight: 600;
 30 }
 31 
 32 h1 span {
 33   font-family: monospace, serif;
 34 }
 35 
 36 h3 {
 37   padding-bottom: 20px;
 38   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9);
 39 }
 40 
 41 p {
 42   margin: 0;
 43   padding: 10px 0;
 44   color: #777;
 45 }
 46 
 47 .clear {
 48   clear: both;
 49 }
 50 
 51 /* -----------------------------------------
 52   =CSS3 Loading animations
 53 -------------------------------------------- */
 54 
 55 /* =Elements style
 56 ---------------------- */
 57 .load-wrapp {
 58   float: left;
 59   width: 100px;
 60   height: 100px;
 61   margin: 0 10px 10px 0;
 62   padding: 20px 20px 20px;
 63   border-radius: 5px;
 64   text-align: center;
 65   background-color: #d8d8d8;
 66 }
 67 
 68 .load-wrapp p {
 69   padding: 0 0 20px;
 70 }
 71 .load-wrapp:last-child {
 72   margin-right: 0;
 73 }
 74 
 75 .line {
 76   display: inline-block;
 77   width: 15px;
 78   height: 15px;
 79   border-radius: 15px;
 80   background-color: #4b9cdb;
 81 }
 82 
 83 .ring-1 {
 84   width: 10px;
 85   height: 10px;
 86   margin: 0 auto;
 87   padding: 10px;
 88   border: 7px dashed #4b9cdb;
 89   border-radius: 100%;
 90 }
 91 
 92 .ring-2 {
 93   position: relative;
 94   width: 45px;
 95   height: 45px;
 96   margin: 0 auto;
 97   border: 4px solid #4b9cdb;
 98   border-radius: 100%;
 99 }
100 
101 .ball-holder {
102   position: absolute;
103   width: 12px;
104   height: 45px;
105   left: 17px;
106   top: 0px;
107 }
108 
109 .ball {
110   position: absolute;
111   top: -11px;
112   left: 0;
113   width: 16px;
114   height: 16px;
115   border-radius: 100%;
116   background: #4282b3;
117 }
118 
119 .letter-holder {
120   padding: 16px;
121 }
122 
123 .letter {
124   float: left;
125   font-size: 14px;
126   color: #777;
127 }
128 
129 .square {
130   width: 12px;
131   height: 12px;
132   border-radius: 4px;
133   background-color: #4b9cdb;
134 }
135 
136 .spinner {
137   position: relative;
138   width: 45px;
139   height: 45px;
140   margin: 0 auto;
141 }
142 
143 .bubble-1,
144 .bubble-2 {
145   position: absolute;
146   top: 0;
147   width: 25px;
148   height: 25px;
149   border-radius: 100%;
150   background-color: #4b9cdb;
151 }
152 
153 .bubble-2 {
154   top: auto;
155   bottom: 0;
156 }
157 
158 .bar {
159   float: left;
160   width: 15px;
161   height: 6px;
162   border-radius: 2px;
163   background-color: #4b9cdb;
164 }
165 
166 /* =Animate the stuff
167 ------------------------ */
168 .load-1 .line:nth-last-child(1) {
169   animation: loadingA 1.5s 1s infinite;
170 }
171 .load-1 .line:nth-last-child(2) {
172   animation: loadingA 1.5s 0.5s infinite;
173 }
174 .load-1 .line:nth-last-child(3) {
175   animation: loadingA 1.5s 0s infinite;
176 }
177 
178 .load-2 .line:nth-last-child(1) {
179   animation: loadingB 1.5s 1s infinite;
180 }
181 .load-2 .line:nth-last-child(2) {
182   animation: loadingB 1.5s 0.5s infinite;
183 }
184 .load-2 .line:nth-last-child(3) {
185   animation: loadingB 1.5s 0s infinite;
186 }
187 
188 .load-3 .line:nth-last-child(1) {
189   animation: loadingC 0.6s 0.1s linear infinite;
190 }
191 .load-3 .line:nth-last-child(2) {
192   animation: loadingC 0.6s 0.2s linear infinite;
193 }
194 .load-3 .line:nth-last-child(3) {
195   animation: loadingC 0.6s 0.3s linear infinite;
196 }
197 
198 .load-4 .ring-1 {
199   animation: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
200 }
201 
202 .load-5 .ball-holder {
203   animation: loadingE 1.3s linear infinite;
204 }
205 
206 .load-6 .letter {
207   animation-name: loadingF;
208   animation-duration: 1.6s;
209   animation-iteration-count: infinite;
210   animation-direction: linear;
211 }
212 
213 .l-1 {
214   animation-delay: 0.48s;
215 }
216 .l-2 {
217   animation-delay: 0.6s;
218 }
219 .l-3 {
220   animation-delay: 0.72s;
221 }
222 .l-4 {
223   animation-delay: 0.84s;
224 }
225 .l-5 {
226   animation-delay: 0.96s;
227 }
228 .l-6 {
229   animation-delay: 1.08s;
230 }
231 .l-7 {
232   animation-delay: 1.2s;
233 }
234 .l-8 {
235   animation-delay: 1.32s;
236 }
237 .l-9 {
238   animation-delay: 1.44s;
239 }
240 .l-10 {
241   animation-delay: 1.56s;
242 }
243 
244 .load-7 .square {
245   animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
246 }
247 
248 .load-8 .line {
249   animation: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
250 }
251 
252 .load-9 .spinner {
253   animation: loadingI 2s linear infinite;
254 }
255 .load-9 .bubble-1,
256 .load-9 .bubble-2 {
257   animation: bounce 2s ease-in-out infinite;
258 }
259 .load-9 .bubble-2 {
260   animation-delay: -1s;
261 }
262 
263 .load-10 .bar {
264   animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
265 }
266 
267 @keyframes loadingA {
268   0 {
269     height: 15px;
270   }
271   50% {
272     height: 35px;
273   }
274   100% {
275     height: 15px;
276   }
277 }
278 
279 @keyframes loadingB {
280   0 {
281     width: 15px;
282   }
283   50% {
284     width: 35px;
285   }
286   100% {
287     width: 15px;
288   }
289 }
290 
291 @keyframes loadingC {
292   0 {
293     transform: translate(0, 0);
294   }
295   50% {
296     transform: translate(0, 15px);
297   }
298   100% {
299     transform: translate(0, 0);
300   }
301 }
302 
303 @keyframes loadingD {
304   0 {
305     transform: rotate(0deg);
306   }
307   50% {
308     transform: rotate(180deg);
309   }
310   100% {
311     transform: rotate(360deg);
312   }
313 }
314 
315 @keyframes loadingE {
316   0 {
317     transform: rotate(0deg);
318   }
319   100% {
320     transform: rotate(360deg);
321   }
322 }
323 
324 @keyframes loadingF {
325   0% {
326     opacity: 0;
327   }
328   100% {
329     opacity: 1;
330   }
331 }
332 
333 @keyframes loadingG {
334   0% {
335     transform: translate(0, 0) rotate(0deg);
336   }
337   50% {
338     transform: translate(70px, 0) rotate(360deg);
339   }
340   100% {
341     transform: translate(0, 0) rotate(0deg);
342   }
343 }
344 
345 @keyframes loadingH {
346   0% {
347     width: 15px;
348   }
349   50% {
350     width: 35px;
351     padding: 4px;
352   }
353   100% {
354     width: 15px;
355   }
356 }
357 
358 @keyframes loadingI {
359   100% {
360     transform: rotate(360deg);
361   }
362 }
363 
364 @keyframes bounce {
365   0%,
366   100% {
367     transform: scale(0);
368   }
369   50% {
370     transform: scale(1);
371   }
372 }
373 
374 @keyframes loadingJ {
375   0%,
376   100% {
377     transform: translate(0, 0);
378   }
379 
380   50% {
381     transform: translate(80px, 0);
382     background-color: #f5634a;
383     width: 25px;
384   }
385 }

 

 

/* -----------------------------------------  =Default css to make the demo more pretty-------------------------------------------- */
body {  margin: 0 auto;  padding: 20px;  max-width: 1200px;  overflow-y: scroll;  font-family: "Open Sans", sans-serif;  font-weight: 400;  color: #777;  background-color: #f7f7f7;  -webkit-font-smoothing: antialiased;  -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%;}
.content {  padding: 15px;  overflow: hidden;  background-color: #e7e7e7;  background-color: rgba(0, 0, 0, 0.06);}
h1 {  padding-bottom: 15px;  border-bottom: 1px solid #d8d8d8;  font-weight: 600;}
h1 span {  font-family: monospace, serif;}
h3 {  padding-bottom: 20px;  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9);}
p {  margin: 0;  padding: 10px 0;  color: #777;}
.clear {  clear: both;}
/* -----------------------------------------  =CSS3 Loading animations-------------------------------------------- */
/* =Elements style---------------------- */.load-wrapp {  float: left;  width: 100px;  height: 100px;  margin: 0 10px 10px 0;  padding: 20px 20px 20px;  border-radius: 5px;  text-align: center;  background-color: #d8d8d8;}
.load-wrapp p {  padding: 0 0 20px;}.load-wrapp:last-child {  margin-right: 0;}
.line {  display: inline-block;  width: 15px;  height: 15px;  border-radius: 15px;  background-color: #4b9cdb;}
.ring-1 {  width: 10px;  height: 10px;  margin: 0 auto;  padding: 10px;  border: 7px dashed #4b9cdb;  border-radius: 100%;}
.ring-2 {  position: relative;  width: 45px;  height: 45px;  margin: 0 auto;  border: 4px solid #4b9cdb;  border-radius: 100%;}
.ball-holder {  position: absolute;  width: 12px;  height: 45px;  left: 17px;  top: 0px;}
.ball {  position: absolute;  top: -11px;  left: 0;  width: 16px;  height: 16px;  border-radius: 100%;  background: #4282b3;}
.letter-holder {  padding: 16px;}
.letter {  float: left;  font-size: 14px;  color: #777;}
.square {  width: 12px;  height: 12px;  border-radius: 4px;  background-color: #4b9cdb;}
.spinner {  position: relative;  width: 45px;  height: 45px;  margin: 0 auto;}
.bubble-1,.bubble-2 {  position: absolute;  top: 0;  width: 25px;  height: 25px;  border-radius: 100%;  background-color: #4b9cdb;}
.bubble-2 {  top: auto;  bottom: 0;}
.bar {  float: left;  width: 15px;  height: 6px;  border-radius: 2px;  background-color: #4b9cdb;}
/* =Animate the stuff------------------------ */.load-1 .line:nth-last-child(1) {  animation: loadingA 1.5s 1s infinite;}.load-1 .line:nth-last-child(2) {  animation: loadingA 1.5s 0.5s infinite;}.load-1 .line:nth-last-child(3) {  animation: loadingA 1.5s 0s infinite;}
.load-2 .line:nth-last-child(1) {  animation: loadingB 1.5s 1s infinite;}.load-2 .line:nth-last-child(2) {  animation: loadingB 1.5s 0.5s infinite;}.load-2 .line:nth-last-child(3) {  animation: loadingB 1.5s 0s infinite;}
.load-3 .line:nth-last-child(1) {  animation: loadingC 0.6s 0.1s linear infinite;}.load-3 .line:nth-last-child(2) {  animation: loadingC 0.6s 0.2s linear infinite;}.load-3 .line:nth-last-child(3) {  animation: loadingC 0.6s 0.3s linear infinite;}
.load-4 .ring-1 {  animation: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}
.load-5 .ball-holder {  animation: loadingE 1.3s linear infinite;}
.load-6 .letter {  animation-name: loadingF;  animation-duration: 1.6s;  animation-iteration-count: infinite;  animation-direction: linear;}
.l-1 {  animation-delay: 0.48s;}.l-2 {  animation-delay: 0.6s;}.l-3 {  animation-delay: 0.72s;}.l-4 {  animation-delay: 0.84s;}.l-5 {  animation-delay: 0.96s;}.l-6 {  animation-delay: 1.08s;}.l-7 {  animation-delay: 1.2s;}.l-8 {  animation-delay: 1.32s;}.l-9 {  animation-delay: 1.44s;}.l-10 {  animation-delay: 1.56s;}
.load-7 .square {  animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}
.load-8 .line {  animation: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}
.load-9 .spinner {  animation: loadingI 2s linear infinite;}.load-9 .bubble-1,.load-9 .bubble-2 {  animation: bounce 2s ease-in-out infinite;}.load-9 .bubble-2 {  animation-delay: -1s;}
.load-10 .bar {  animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}
@keyframes loadingA {  0 {    height: 15px;  }  50% {    height: 35px;  }  100% {    height: 15px;  }}
@keyframes loadingB {  0 {    width: 15px;  }  50% {    width: 35px;  }  100% {    width: 15px;  }}
@keyframes loadingC {  0 {    transform: translate(0, 0);  }  50% {    transform: translate(0, 15px);  }  100% {    transform: translate(0, 0);  }}
@keyframes loadingD {  0 {    transform: rotate(0deg);  }  50% {    transform: rotate(180deg);  }  100% {    transform: rotate(360deg);  }}
@keyframes loadingE {  0 {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}
@keyframes loadingF {  0% {    opacity: 0;  }  100% {    opacity: 1;  }}
@keyframes loadingG {  0% {    transform: translate(0, 0) rotate(0deg);  }  50% {    transform: translate(70px, 0) rotate(360deg);  }  100% {    transform: translate(0, 0) rotate(0deg);  }}
@keyframes loadingH {  0% {    width: 15px;  }  50% {    width: 35px;    padding: 4px;  }  100% {    width: 15px;  }}
@keyframes loadingI {  100% {    transform: rotate(360deg);  }}
@keyframes bounce {  0%,  100% {    transform: scale(0);  }  50% {    transform: scale(1);  }}
@keyframes loadingJ {  0%,  100% {    transform: translate(0, 0);  }
  50% {    transform: translate(80px, 0);    background-color: #f5634a;    width: 25px;  }}

 

相關文章