用css3实现一个简单的loading动画

在访问各种网站的时候我们经常会看到各式各样的加载动画，超级炫酷，有的是gif图片做成的，有的是svg做成的，有的是通过js控制dom做成的，在css3出现以后，好多都是纯css的，本着程序员造轮子的精神，自己决定用css实现自己网站的加载动画。效果如下（虽然不是很炫酷，嘿嘿）

效果图：

下面我们开始动手，在开始前，我们分析一下这个动画是如何形成的

1. .最基本的旋转。
   很明显6个白色圆点以半径r绕着中心不停的旋转

2. 旋转速度。
   可以看到，6个圆点之间距离不断变化，从窄到宽，过半后又慢慢变窄。根据速度v、时间t、距离l的关系（l=t(v1-v2)）,可以知道他们之间的速度是不一样的，并且从最前面一个依次递减，我们只需设置一个合适的值就好了。

如何实现

我们已经分析了动画如何实现的了，如何用html和css实现呢。
首先是白色的圆点，使用css的border-radius：宽度或者高度的一半；

然后是半径r和中心点，这里是将白点放入一个div中，将其高度设置为r，然后是中心点，使用absolute布局，设置bottom为容器的50%,left:50%

最后是动画使用css3的@keyframes
根据上面的分析，我们可以把6圆点的旋转值从180deg依次往前推一定间隔，这样，他们就会表现出不同的速度，
后半段通过控制动画的总时间一致，浏览器会自动调整期旋转速度。
实现如下，依次前推30deg

@keyframes myloading1{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(180deg);opacity: 0.9}
100%{transform: rotate(360deg);opacity: 0.1}
}
@keyframes myloading2{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(150deg);opacity: 0.85}
100%{transform: rotate(360deg);opacity: 0.1}
}
@keyframes myloading3{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(120deg);opacity: 0.8}
100%{transform: rotate(360deg);opacity: 0.1}
}
@keyframes myloading4{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(90deg);opacity: 0.75}
100%{transform: rotate(360deg);opacity: 0.1}
}
@keyframes myloading5{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(60deg);opacity: 0.7}
100%{transform: rotate(360deg);opacity: 0.1}
}
@keyframes myloading6{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(30deg);opacity: 0.65}
100%{transform: rotate(360deg);opacity: 0.1}
}

最后把动画加到div上，style="animation:myloading* 5s infinite linear;"

最终代码

我的博客：http://blog.timefluid.cn