页面loading效果实现思路

我们国家的人数众多，导致的结果就是不管去干啥都要排队，都要等待。当然这是理想状态，现实中的情况却是大家一拥而上，根本不管什么排队不排队的。就算勉强排成了队形，也总是有些人插队，插队不是某一类人，而是全员，从年迈的老人到高素质的大学生，从公司白领到抱孩子的女人。总之，插队已经成为全全民参与的一项运动。当我遇见这种情况的时候，总是会无奈的叹口气，然后悄然的跟着插队的人站在他的后面，从容不迫的完成我的“插队”之举。

在面临排队的时候，那可真是众生相十足啊，有人看书，有人看手机，有人和旁边的人闲聊，有人打电话，有人看天空，有人双眼盯着那些插队的人嘴里骂骂咧咧。都是无聊闹的……那么我们在页面中也会出现类似的忙碌情况，当有大量图片加载或者网速没有足够快。访问者望着一片白的浏览器，估计没有人能坚持几秒钟直接就关闭了。这种情况不是我们网页制作者愿意见到的。可是我们管不了分配带宽，也管不了网站编辑。怎么办？

我们能做的就是通过自己已经掌握的知识来为遇见的新问题来提供解决方案。添加一个loading效果的图标是一个很好的解决方案，在CSS3之前都会用到一张小小的GIF来实现loading的效果。

而在CSS3出现了transform:rotate();之后我们就可以用一张体积较小的JPG图片来代替体积较大的GIF图片，甚至图形也直接用CSS来生成，例如用《border一点都不简单》一文中的border来生成三角形;也可以用CSS中十分生僻的属性Clip-Path:polygon();来做更复杂的图形。

先来看看浏览器对transform:rotate();的支持情况。

浏览器对CSS属性transform的支持情况

浏览器对CSS属性transform的支持情况

还不错~图上有黄色小点的地方就是说需要加私有前缀。主流浏览器的主要版本都支持这哥们，IE8及之前版本的IE不支持，IE9需要添加-ms-私有前缀。不过IE9只能支持transform的2D转换，对于3D转换-ms-transform:rotate3d();会完全无感。

transform:rotate();的括号里面要填写的是需要旋转的度数。例如90deg表述的就是90°。有了旋转了，还必须配合CSS中高级装逼利器animation和@keyframes来创建动画。关于它们的用法，后续的文章介绍基础CSS的时候，我会详细说明，这里只是说它的作用是做动画的。看示例DEMO就会对这两货有一定的感性了解。

那画面太美我不敢看

很有意思是吧！让animation控制图形元素进行transform:rotate();就能实现loading效果。这是基本技术原理。用CSS制作简单的图形有几种方法，除前文举例的border制作三角形之外还有用Clip-Path:polygon();制作较为复杂的多边形，不过这哥们太生僻了而且对浏览器支持不广泛。这里我决定用box-shadow属性和border-radius属性来制作由小圈圈组成的圆环。

是时候展现真正的技术了

通过border-radius来设置一个圆形，然后通过box-shadow的多重阴影来设置“环”上的其他点：

/*border-radius和box-shadow生成圆环*/
div {
    margin: 50px auto;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    box-shadow: 0 -12px 0 3px #000,
                0 12px 1px 1px #333,
                -12px 0 2px 1px #333,
                12px 0 0 1px #333,
                -9px -9px 3px 1px #333,
                9px -9px 0 2px #333,
                -9px 9px 1px 1px #333,
                9px 9px 0 1px #333;
}

想让我们的小“圆环”动起来的话，只需要给这个

的CSS样式添加animation的声明即可。不过在这之前我们需要用@keyframes来设置我们的图形的旋转效果。

/*@keyframes设置*/
/*为了保证兼容性，清设置私有制前缀，总有些人懒得升级自己的浏览器。*/
@-moz-keyframes gif-loading {
    from{transform: rotate(360deg);}
    to{transform: rotate(0deg);}
}
@-o-keyframes gif-loading {
    from{transform: rotate(360deg);}
    to{transform: rotate(0deg);}
}
@-webkit-keyframes gif-loading {
    from{transform: rotate(360deg);}
    to{transform: rotate(0deg);}
}
@keyframes gif-loading{
    from{transform: rotate(360deg);}
    to{transform: rotate(0deg);}
}
/*为了保证兼容性，清设置私有制前缀，总有些人懒得升级自己的浏览器。*/

设置完@keyframes之后，我们就要用animation属性把我们的@keyframes动画效果应用到我们的”圆环”上面了。这一步比较简单，代码如下：

/*animation应用效果*/
/*为了保证兼容性，清设置私有制前缀，总有些人懒得升级自己的浏览器。*/
div {
    margin: 50px auto;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    box-shadow: 0 -12px 0 3px #000,
                0 12px 1px 1px #333,
                -12px 0 2px 1px #333,
                12px 0 0 1px #333,
                -9px -9px 3px 1px #333,
                9px -9px 0 2px #333,
                -9px 9px 1px 1px #333,
                9px 9px 0 1px #333;  
    -webkit-animation: gif-loading 2s linear 0s infinite;
    -moz-animation: gif-loading 2s linear 0s infinite;
    -o-animation: gif-loading 2s linear 0s infinite;
    animation: gif-loading 2s linear 0s infinite;
}
/*为了保证兼容性，清设置私有制前缀，总有些人懒得升级自己的浏览器。*/

这下我们就得到了一个纯CSS制作的loading效果了……↓↓↓↓↓↓

loading

OK！大功告成~~ 奇怪怎么看起来这个圆环有点“方形”的感觉？算了……不管它了，就这吧…

签名