本文的代码部分是转载的,解释部分是原创的。全部代码可参见:
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 内核的浏览器,所以可以考虑删除。