纯CSS实现的Loading效果

当前位置 : 首页 > 网页制作 > CSS > 纯CSS实现的Loading效果

纯CSS实现的Loading效果

来源: 作者: 时间:2016-01-25 10:02
纯CSS实现的Loading效果,CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。效果下载链接文章下面。先来看看实现过程,先看html文件,div container为效果容器,里面有二

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

data-cke-saved-src=/uploads/allimg/c160125/1453DC6154430-22003.gif

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

 


 
 

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

/*
首先定义几个变量
盒子的宽和高,@w,@h
盒子里面圆的数目,@n
*/
@w:200px;
@h:200px;
@n:20;
/*设置盒子的大小和位置*/
.container{
  width:@w;
  height:@h;
  position:absolute;
  top:50%;
  left:50%;
  margin:[email protected]/2 0 0 [email protected]/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:@[email protected]/20;
    height:@[email protected]/20;
    margin:[email protected][email protected]/40 0 0 [email protected][email protected]/40;
    animation-delay:[email protected];
    z-index:@n - @index;
	}

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

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

 


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

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

 

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

Tag:
网友评论

<