几个单元素Loading动画解构

这个账号建了也有1个多月，拖延症患者终于下定决心开始写博。做前端从前至后差不多1年时间，如果文中有什么纰漏欢迎指出，未来的路还很长~

几个单元素Loading动画解构

第一篇文章用来解构几个挺不错的单元素Loading动画。效果图如下：

几个单元素Loading动画解构

Demo中每个动画不考虑容器都只使用一个div标签，通过添加阴影和伪元素再加以动画效果即可实现。下面我们来逐个对图中的动画进行分析。

总体HTML解构：

　　<div class="loader">Loading...</div>
</div>

CSS分析：

Demo 1:

第一步：首先通过对loader类添加::before和::after两个伪元素副本，和主元素一样width为1em，height为4em。并设置position:absolute，通过调整TRBL到左右位置，实现如下图中的排列（注意需要在父元素上设置position:relative，这样才能根据父元素位置进行定位）。

几个单元素Loading动画解构

第二步：设置动画关键帧（@keyframes），关于关键帧的介绍可以参考W3C的Animation介绍。设置0%、80%、100%处为初始状态即 box-shadow: 0 0 #FFF; height: 4em; 在40%处设置为拉伸状态即：box-shadow: 0 -2em #ffffff; height: 5em; 其中使用box-shadow是为了实现沿水平轴线伸缩的效果。当然其中的长度我们可以自己设置，选择一个合适的伸缩尺度。考虑兼容性可加上内核前缀。

第三步：将动画添加至三个元素中，并使用animation-delay属性设置不同的时延以达到依次伸缩的效果。

以下是该Loading动画的CSS代码，总的来说还是很容易实现的。

 1 .load1 .loader,
 2 .load1 .loader:before,
 3 .load1 .loader:after {
 4   background: #FFF;
 5   -webkit-animation: load1 1s infinite ease-in-out;
 6   animation: load1 1s infinite ease-in-out;
 7   width: 1em;
 8   height: 4em;
 9 }
10 .load1 .loader:before,
11 .load1 .loader:after {
12   position: absolute;
13   top: 0;
14   content: '';
15 }
16 .load1 .loader:before {
17   left: -1.5em;
18   -webkit-animation-delay: -0.32s;
19   animation-delay: -0.32s;
20 }
21 .load1 .loader {
22   text-indent: -9999em;
23   margin: 8em auto;
24   position: relative;
25   font-size: 11px;
26   -webkit-animation-delay: -0.16s;
27   animation-delay: -0.16s;
28 }
29 .load1 .loader:after {
30   left: 1.5em;
31 }
32 @-webkit-keyframes load1 {
33   0%,
34   80%,
35   100% {
36     box-shadow: 0 0 #FFF;
37     height: 4em;
38   }
39   40% {
40     box-shadow: 0 -2em #ffffff;
41     height: 5em;
42   }
43 }
44 @keyframes load1 {
45   0%,
46   80%,
47   100% {
48     box-shadow: 0 0 #FFF;
49     height: 4em;
50   }
51   40% {
52     box-shadow: 0 -2em #ffffff;
53     height: 5em;
54   }
55 }

View Code