纯CSS实现的Loading效果

最新推荐文章于 2024-06-20 13:18:10 发布

whqet

最新推荐文章于 2024-06-20 13:18:10 发布

阅读量4.3k

点赞数 2

分类专栏： css3 less&sass CSS3演武场文章标签：前端开发 pure css css3 loading less

本文链接：https://blog.csdn.net/whqet/article/details/19409321

版权

css3 同时被 3 个专栏收录

81 篇文章 3 订阅

订阅专栏

学习笔记

66 篇文章 1 订阅

订阅专栏

技术总结

59 篇文章 0 订阅

订阅专栏

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

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

<div class="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

接着是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定义循环*/
.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。代码里没有列出，需要的童鞋可以单击下载本效果文件包。

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

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------