多种多样的Loading特效

Posted 2020-07-25 自诩

每次打开一些新闻客服端等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>

View Code

首先是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     }

View Code

代码中的数值设置不要在意，根据不同动画效果设置也不同。

具体效果演示可点击：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>

View Code

特效的动画原理：首先同样绝对定位四个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     }

View Code

第三种特效：

这个特效就很容易实现了，通过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     }

View Code

总结：

一般这种动画的实现原理都大同小异，明白了一个动画的动画原理，结合html/css知识的理解，就很容易做到。

具体效果可查看：http://www.w3cfuns.com/notes/19044/54865f5fbdd5a3126798755e7c3e14a2.html