本文的代码部分是转载的，解释部分是原创的。全部代码可参见：
CSS3实现10种Loading效果 - 简书 (jianshu.com)
效果
HTML
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS
@ -webkit-keyframes loading {
0%,100% { height: 40px; background: lightgreen; }
50% { height: 70px; margin: -15px 0; background: lightblue; }
}
.loading { width: 80px; height:40px; margin:0 auto; margin-top:100px; }
.loading span { display:inline-block; width:8px; height:100%; border-radius:4px; background:lightgreen; -webkit-animation:loading 1s ease infinite; }
.loading span:nth-child(2) { -webkit-animation-delay:0.2s; }
.loading span:nth-child(3) { -webkit-animation-delay:0.4s; }
.loading span:nth-child(4) { -webkit-animation-delay:0.6s; }
.loading span:nth-child(5) { -webkit-animation-delay:0.8s; }关键内容是：
@-webkit-keyframes 创建各阶段的效果，可以理解为帧。
也有用 from、to 代替 0%、100% 的。
-webkit-animation 去响应上面这个动画。有如下子属性：
-webkit-animation-name 动画名称，就是 -webkit-keyframes 中定义的。
-webkit-animation-duration 完成一次动画所需的时间。
-webkit-animation-timing-function 速度曲线。
linear 匀速。
ease 慢->快->慢，此为默认。
ease-in 慢->快。
ease-out 快->慢。
ease-in-out 慢->快->慢，但与 ease 相比，慢快更柔和些。
-webkit-animation-delay 动画开始之前的延迟。
-webkit-animation-iteration-count 动画播放次数，infinite 表示无限。默认为 1 次。
-webkit-animation-direction normal 正常播放、alternate 在 1、3、5……正常播放，在 2、4、6……反向播放，就好比一个球弹出去，又弹回来，在弹回来时，就要使用反向播放，即要使用 alternate。
注：上述 -webkit- 可以删除，在 Chrome、Firefox 中均不影响浏览，而大家现在用的基本都是 Chromium 内核的浏览器，所以可以考虑删除。
