前言

loading效果在实际开发中是很常见的，尤其是在Ajax请求的时候，可以给用户一个很好的交互体验。

今天这篇文章我们一起来看看如何通过CSS3实现各种不同的loading效果吧，文章中的代码可以从github自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html

CSS3

实现效果

首先我们来看看需要实现的效果。

效果图

然后我们一个个来看都是怎么实现的吧。

loadingA

loadingA的效果就如音乐播放时的动态条一般，不停的连续执行。

其主要实现思路如下：

• 每个竖状条都是一个简单的div，div为一个小的圆形。

• 给每个div加上一个动画效果，该动画的效果是高度逐渐变长，最后再变回原样。

• 每个div延迟不同的时间才开始执行，这样就会有先后的层次感。

然后我们来看看各个部分的代码实现。

• 基本的div元素

基本的div元素是一个小的圆形。

基本的div元素

• 定义动画

定义的动画主要是改变div的高度，在完成50%的时候达到最高值，完成100%时恢复到原来高度。

动画效果

• 设置动画

将定义的动画添加至animation属性，设置一个动画总执行时间，然后给5个div设置不同的延时时间。

设置动画

• HTML元素

将以上设置的CSS属性都添加至HTML元素中。

HTML元素

将以上代码写完后，直接在浏览器运行就可以看到如loadingA的效果了。

loadingB

如果细心的看完loadingA的实现过程，一定可以联想到loadingB的实现。

loadingA是通过给高度加动画，那么loadingB就是通过给宽度加动画，同样给5个div不同的延迟时间。

这里我只给出其动画定义，其他的内容与loadingA类似，详细的内容可以通过github去看。

loadingB动画

loadingC

loadingC的实现效果如下。

loadingC

在loadingA和loadingB中是通过给高度和宽度增加动画实现的，而loadingC是通过给五个div增加纵向位移实现的。

loadingC实现的关键点就在于translateY的使用，因为动画是从下往上跳动，所以在完成度50%时，translateY设定为负值。

其定义的动画部分代码如下所示。

定义动画

loadingD

loadingD的实现效果如下。

loadingD效果

通过效果图我们发现有两点差异：

• loading过程中透明度会发生变化，这个通过opacity实现。

• 在接近完成时有个上下轻微抖动的效果，这个通过设置小单位的正负translateY值。

得到的动画代码如下。

loadingD动画

loadingE

loadingE的动画效果如下。

loadingE

loadingE的效果同loadingD类似，loadingD是通过纵向的位移变换，可以通过translateY实现。

loadingE是通过水平方向位移变换，可以通过translateX来实现。

而有一点不同的是，loadingE的div初始位置就是translateX(-300px)，表示从左侧开始运动。

loadingE动画

loadingF

loadingF定义的动画如下所示。

loadingF

loadingF是旋转效果，可以很容易想到是通过rotate实现。

loadingF中只有一个div，边框设置为虚线即可，其CSS样式如下。

loadingF基本样式

其定义的动画样式如下。

loadingF定义动画

loadingG&loadingH

loadingG与loadingH的动画效果如下。

loadingG&loadingH

loadingG与loadingH类似，loadingH在loadingG的基础上增加了几个点。

loadingG中是通过设置一个纵向的div-1，在该div-1内增加一个div-2，div-2就是转动的圆点，div-2通过绝对定位计算出实际位置，当div-1大小变化时，div-2也应该重新计算位置。

div-2的CSS代码如下所示。

loadingG基本样式

在loadingH中，div-1内有四个div，分别表示转动的四个圆点，也是通过绝对定位计算偏移位置。

最后设置动画，只需要让div-1在一个动画周期内旋转360度即可。

loadingG

loadingI

loadingI的效果图如下所示。

loadingI

loadingI的动画主要涉及到放大缩小和旋转两个方面，放大缩小通过scale实现，旋转通过rotate实现。具体的可以看看github上的完整代码。

结束语

今天这篇文章主要是教大家如何使用CSS3的动画特性去实现loading效果，完全可以不用借助于第三方库，大家也动动手自己实现一下吧。