这是一组效果非常炫酷的纯CSS3 loading加载动画特效。这组loading动画共10种不同的效果，全部使用animation帧动画制作而成。这些特效代码简洁，效果炫酷，非常值得学习借鉴。
制作方法
HTML结构
所有的loading效果都使用相同的HTML结构：使用元素作为包裹元素，里面放置用于动画的div.spinner元素。各种动画效果均由div.spinner元素元素和它的:before和:after伪元素制作。
CSS样式
特效中为spinner元素设置了一些同于样式：宽度和高度均为50像素，相对于section绝对定位。
.spinner {
width: 50px;
height: 50px;
border-radius: 100%;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
在第一种loading效果中，section的背景设置为褐色。spinner元素执行color-bubble帧动画。这个帧动画修改元素的颜色。
.model-1 {
background: #20;
}
.model-1 .spinner {
color: #f00;
-webkit-animation: color-bubble 2s linear 0s infinite;
animation: color-bubble 2s linear 0s infinite;<
