每次打开一些新闻客服端等APP都会看到很有特色的loading特效，就好奇用前端的知识该怎么去实现，本来以为要花挺长时间，不过明白了原理之后就很快搞定了。
大多数的特效原理都是想通的，所以就上了四种特效，代码可能写的比较粗糙，大家多多理解，相互学习。（并未兼容IE浏览器哦）。
第一种特效：
1 <div id="loading_1"> 2 <div class="cir cir1"><span></span></div> 3 <div class="cir cir2"><span></span></div> 4 <div class="cir cir3"><span></span></div> 5 <div class="cir cir4"><span></span></div> 6 </div>
首先是Html结构，四个div分别具有不同的颜色，将其进行绝对定位，让四个div的初始位置在同一个点，然后对每个div块进行动画设置。最后再将外层div绕中心点进行旋转形成最终效果动画。
下面是样式代码，主要通过css3动画实现。
1 #loading_1 {
2 width: 400px;
3 height: 200px;
4 /*border: 1px solid #ddd;*/
5 position: relative;
6 animation: rotate 2s infinite;
7 margin: 0 auto;
8 }
9
10 @keyframes rotate {
11 0% {
12 transform: rotate(0deg);
13 }
14 50% {
15 transform: rotate(180deg);
16 }
17 100% {
18 transform: rotate(360deg);
19 }
20 }
21
22 .cir {
23 position: absolute;
24 width: 16px;
25 height: 16px;
26 overflow: hidden;
27 top: 92px;
28 left: 192px;
29 }
30
31 #loading_1 div:nth-child(1) {
32 background: #8EE5EE;
33 }
34
35 #loading_1 div:nth-child(2) {
36 background: #FFE4B5;
37 }
38
39 #loading_1 div:nth-child(3) {
40 background: #00CD00;
41 }
42
43 #loading_1 div:nth-child(4) {
44 background: #FF6A6A;
45 }
46
47 .cir1 {
48 animation: loading_1 2s linear infinite;
49 }
50
51 @keyframes loading_1 {
52 0% {
53 top: 62px;
54 left: 162px;
55 }
56 50% {
57 top: 92px;
58 left: 192px;
59 }
60 100% {
61 top: 62px;
62 left: 162px;
63 }
64 }
65
66 .cir2 {
67 animation: loading_2 2s linear infinite;
68 }
69
70 @keyframes loading_2 {
71 0% {
72 top: 62px;
73 left: 222px;
74 }
75 50% {
76 top: 92px;
77 left: 192px;
78 }
79 100% {
80 top: 62px;
81 left: 222px;
82 }
83 }
84
85 .cir3 {
86 animation: loading_3 2s linear infinite;
87 }
88
89 @keyframes loading_3 {
90 0% {
91 top: 122px;
92 left: 162px;
93 }
94 50% {
95 top: 92px;
96 left: 192px;
97 }
98 100% {
99 top: 122px;
100 left: 162px;
101 }
102 }
103
104 .cir4 {
105 animation: loading_4 2s linear infinite;
106 }
107
108 @keyframes loading_4 {
109 0% {
110 top: 122px;
111 left: 222px;
112 }
113 50% {
114 top: 92px;
115 left: 192px;
116 }
117 100% {
118 top: 122px;
119 left: 222px;
120 }
121 }
代码中的数值设置不要在意，根据不同动画效果设置也不同。
具体效果演示可点击：http://www.w3cfuns.com/notes/19044/54865f5fbdd5a3126798755e7c3e14a2.html
第二种特效：
首先还是上Html结构代码
1 <div id="loading_2"> 2 <div><span></span></div> 3 <div><span></span></div> 4 <div><span></span></div> 5 <div><span></span></div> 6 </div>
特效的动画原理：首先同样绝对定位四个div，每一个div的左上角都有一个span，具有不用的颜色，刚开始四个div是重叠在一起的，然后对每一个div进行旋转，但是此时要给后续的div旋转动画设置一个延迟。
来看一下css代码：
1 #loading_2 {
2 width: 400px;
3 height: 200px;
4 position: relative;
5 margin: 0 auto;
6 }
7
8 #loading_2 div {
9 width: 100px;
10 height: 100px;
11 position: absolute;
12 margin-left: 150px;
13 animation: loading 1.8s linear infinite;
14 }
15
16 #loading_2 span {
17 display: block;
18 width: 20px;
19 height: 20px;
20 border-radius: 20px;
21 }
22
23 @keyframes loading {
24 0% {
25 transform: rotate(0deg);
26 }
27 10% {
28 transform: rotate(45deg);
29 }
30 50% {
31 opacity: 1;
32 transform: rotate(160deg);
33 }
34 62% {
35 opacity: 0;
36 }
37 65% {
38 opacity: 0;
39 transform: rotate(200deg);
40 }
41 90% {
42 transform: rotate(340deg);
43 }
44 100% {
45 transform: rotate(360deg);
46 }
47 }
48
49 #loading_2 span {
50 background: #8EE5EE;
51 }
52
53 #loading_2 div:nth-child(1) {
54 animation-delay: 0.2s;
55 }
56
57 #loading_2 div:nth-child(2) {
58 animation-delay: 0.4s;
59 }
60
61 #loading_2 div:nth-child(3) {
62 animation-delay: 0.6s;
63 }
64
65 #loading_2 div:nth-child(4) {
66 animation-delay: 0.8s;
67 }
第三种特效：
这个特效就很容易实现了，通过css3属性中的scale缩放属性很容易实现，同样可以设置延迟，实现不同的效果。
直接上代码了：
1 #loading_3 {
2 width: 400px;
3 height: 200px;
4 margin: 0 auto;
5 }
6
7 #loading_3 div {
8 float: left;
9 width: 10px;
10 height: 80px;
11 margin-left: 20px;
12 animation: scale 1.5s linear infinite;
13 }
14
15 @keyframes scale {
16 0% {
17 transform: scale(1, 1);
18 }
19 50% {
20 transform: scale(1, 1.8);
21 }
22 100% {
23 transform: scale(1, 1);
24 }
25 }
26
27 #loading_3 div:nth-child(1) {
28 background: #8EE5EE;
29 margin-left: 150px;
30 animation-delay: 0.2s;
31 }
32
33 #loading_3 div:nth-child(2) {
34 background: #FFE4B5;
35 animation-delay: 0.4s;
36 }
37
38 #loading_3 div:nth-child(3) {
39 background: #00CD00;
40 animation-delay: 0.6s;
41 }
42
43 #loading_3 div:nth-child(4) {
44 background: #FF6A6A;
45 animation-delay: 0.8s;
46 }
总结：
一般这种动画的实现原理都大同小异，明白了一个动画的动画原理，结合html/css知识的理解，就很容易做到。
具体效果可查看：http://www.w3cfuns.com/notes/19044/54865f5fbdd5a3126798755e7c3e14a2.html
时间： 2024-11-26 02:43:54