纯CSS实现的Loading效果

纯CSS实现的Loading效果，CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。效果下载链接文章下面。

先来看看实现过程，先看html文件，p.container为效果容器，里面有二十个p,circle。

接着是CSS文件，我们通过LESS循环实现对每个.circle设置不同的大小、不同的动画延迟。

/*
首先定义几个变量
盒子的宽和高，@w,@h
盒子里面圆的数目，@n
*/
@w:200px;
@h:200px;
@n:20;
/*设置盒子的大小和位置*/
.container{
  width:@w;
  height:@h;
  position:absolute;
  top:50%;
  left:50%;
  margin:-@w/2 0 0 -@h/2;
}
/*设置.circle的通用表现*/
.circle{
  position:absolute;
  top:50%;
  left:50%;
  transform-origin:center center;
}
/*偶数.circle的表现*/
.circle:nth-child(2n){
  border: 1px dashed #16c;
  box-shadow:0 0 3px #16c;
  animation:oklw 4s ease infinite;
}
/*奇数.circle的表现*/
.circle:nth-child(2n+1){
	border: 1px solid #c16;
  box-shadow:0 0 3px #c16;
  animation:okrw 6s ease infinite;
}
/*设置动画*/
@keyframes oklw{
  0%{
    transform:rotate(720deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
@keyframes okrw{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(720deg);
  }
}
/* 
--不用LESS的傻傻的一个个写过来的，开始-----------------

.circle:nth-child(1){
  width:20px;
  height:20px;
  margin:-10px 0 0 -10px;
  animation-delay:.5s;
}
.circle:nth-child(2){
  width:20px;
  height:20px;
  margin:-10px 0 0 -10px;
  animation-delay:.5s;
}
.circle:nth-child(3){
  width:40px;
  height:40px;
  margin:-20px 0 0 -20px;
  animation-delay:1s;
}
.circle:nth-child(4){
  width:40px;
  height:40px;
  margin:-20px 0 0 -20px;
  animation-delay:1s;
}
.circle:nth-child(5){
  width:60px;
  height:60px;
  margin:-30px 0 0 -30px;
  animation-delay:1.5s;
}
.circle:nth-child(6){
  width:60px;
  height:60px;
  margin:-30px 0 0 -30px;
  animation-delay:1.5s;
}
.circle:nth-child(7){
  width:80px;
  height:80px;
  margin:-40px 0 0 -40px;
  animation-delay:2s;
}
.circle:nth-child(8){
  width:80px;
  height:80px;
  margin:-40px 0 0 -40px;
  animation-delay:2s;
}
.circle:nth-child(9){
  width:100px;
  height:100px;
  margin:-50px 0 0 -50px;
  animation-delay:2.5s;
}
.circle:nth-child(10){
  width:100px;
  height:100px;
  margin:-50px 0 0 -50px;
  animation-delay:2.5s;
}
.circle:nth-child(11){
  width:120px;
  height:120px;
  margin:-60px 0 0 -60px;
  animation-delay:3s;
}
.circle:nth-child(12){
  width:120px;
  height:120px;
  margin:-60px 0 0 -60px;
  animation-delay:3s;
}
.circle:nth-child(13){
  width:140px;
  height:140px;
  margin:-70px 0 0 -70px;
  animation-delay:3.5s;
}
.circle:nth-child(14){
  width:140px;
  height:140px;
  margin:-70px 0 0 -70px;
  animation-delay:3.5s;
}
.circle:nth-child(15){
  width:160px;
  height:160px;
  margin:-80px 0 0 -80px;
  animation-delay:4s;
}
.circle:nth-child(16){
  width:160px;
  height:160px;
  margin:-80px 0 0 -80px;
  animation-delay:4s;
}
--不用LESS的傻傻的一个个写过来的，结束位置-----------------
*/
/*利用LESS定义循环*/
.loopingClass (@index) when (@index > 0) {
	
  //设置每个.circle
	.circle:nth-child(@{index}) {
		width:@w*@index/20;
    height:@h*@index/20;
    margin:-@h*@index/40 0 0 -@w*@index/40;
    animation-delay:0.2s*@index;
    z-index:@n - @index;
	}

	// 下一次的循环
	.loopingClass(@index - 1);
}
//执行到0时，啥都不干，结束循环
.loopingClass (0) {}

/*调用循环*/
.loopingClass (@n);  

OK，效果完毕。相信大家结合注释应该能看明白，不再具体具体解释代码书写过程，大家可以到codepen在线编辑或下载本效果。

为了简化起见，我们用了prefix free.js和normalize.css。代码里没有列出，需要的童鞋可以单击下载本效果文件包。

---------------------------------------------------------------