10种CSS3实现的loading动画，挑一个走吧？
这篇文章主要介绍了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; }}
10种CSS3实现的loading动画，挑一个走吧？的更多相关文章
- 10种CSS3实现的Loading效果
原文链接:http://www.cnblogs.com/jr1993/p/4622039.html 第一种效果: 代码如下: <div class="loading"> ...
- 10款CSS3进度条Loading动画
在线演示 本地下载
- 【常见】CSS3进度条Loading动画
现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 28种CSS3炫酷载入动画特效
这是一组效果很炫酷的纯CSS3 Loading载入动画特效.这组loading动画共同拥有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完毕的,每个载入动画都构 ...
- CSS3扁平化Loading动画特效
效果预览:http://hovertree.com/texiao/css3/42/ 代码如下: <!doctype html> <html> <head> < ...
- CSS3实现10种Loading效果（转）
CSS3实现10种Loading效果 原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...
- Css3实现常用的几种loading动画
css实现loading动画非常方便,也非常实用 第一种 <!DOCTYPE html> <html lang="en"> <head> < ...
- 9种CSS3炫酷图片展开预览展示动画特效
详细内容请点击 在线预览立即下载 这是一组共9款CSS3炫酷图片预览展示动画特效插件.css的新特性可以让我们制作出各种炫酷的动画效果.该图片预览展示动画特效就是一个很好的例子,该效果开始时图片堆叠在 ...
随机推荐
- Python爬虫urllib模块
Python爬虫练习(urllib模块) 关注公众号"轻松学编程"了解更多. 1.获取百度首页数据 流程:a.设置请求地址 b.设置请求时间 c.获取响应(对响应进行解码) ''' ...
- MeterSphere开发者手册
什么是 MeterSphere MeterSphere 是一站式的开源企业级持续测试平台, 涵盖测试跟踪.接口测试.性能测试. 团队协作等功能,兼容 JMeter 等开源标准,有效助力开发和测试团队充 ...
- Ubuntu 18.04 Tomcat 端口号查询
参考http://blog.csdn.net/liufuwu1/article/details/71123597 最近几天发现许多这篇笔记被许多朋友访问,推测有很多朋友也与我有相同的疑惑,而原始版本过 ...
- python08豆瓣电影 爬虫 BeautifulSoup + Reuqests
主要思路 请求豆瓣的链接获取网页源代码 然后使用 BeatifulSoup 拿到我们要的内容 最后就把数据存储到 excel 文件中
- SpringBoot第九集：整合JSP和模板引擎Freemarker/Thymeleaf（2020最新最易懂）
SpringBoot第九集:整合JSP和模板引擎(2020最新最易懂) 当客户通过前端页面提交请求后,我们以前是怎么做的?后端接收请求数据,处理请求,把响应结果交给模板引擎JSP,最后将渲染后的JSP ...
- Pyston v2.0 发布，解决 Python 慢速的救星
Pyston 自从 2017 年发布 0.6.1 版本后,已经淡出了人们的视线三年多了,导致现在新人都很少听过它的大名. 前两天(2020年10月28日)Pyston 在官方博客上(https://b ...
- 剑指Offer-Python(1-5)
1.二维数组的查找 查找,其实就可以挨个进行比较就可以.又由于题目说明(每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序),因此如果利用类似于二分查找的方法,那么比较次数则会更少 ...
- EF6 Code First 博客学习记录
学习一下ef6的用法 这个学习过程时按照微软官网的流程模拟了一下 就按照下面的顺序来写吧 1.连接数据库 自动生成数据库 2.数据库迁移 3.地理位置以及同步/异步处理(空了再补) 4.完全自动迁移 ...
- Linux C 获取本机所有网卡的 IP，Mask
0 运行环境 本机系统:Windows 10 虚拟机软件:Oracle VM VirtualBox 6 虚拟机系统:Ubuntu 18 1 代码 #include <sys/ioctl.h> ...
- 手写一个最迷你的Web服务器
今天我们就仿照Tomcat服务器来手写一个最简单最迷你版的web服务器,仅供学习交流. 1. 在你windows系统盘的F盘下,创建一个文件夹webroot,用来存放前端代码. 2. 代码介绍: ( ...