CSS3制作加载中loading动画效果

 常见的loading加载中通常是使用一个gif来实现动画效果，实际上我们可以使用css3的特性来制作，本文介绍了一种线性加载效果的css3制作方法。

在web开发中经常遇到ajax的加载，那个加载中的图标大家是不是都是用gif制作的呢？
这里顺便一提，有一个定制loader gif的小图标的工具网站，点击这里查看

此文中介绍一种线性样式的加载样式，点击这里查看demo

我们都知道，动画的本质是一帧一振画面按顺序播放，因此我们就有如下的设计思路：

画一排五个小圆圈，五个小圆圈总是花1秒时间完成透明度从1到0.1的动画，但是每个动画播放时间不同，依次延后0.2秒。

见代码实现：

首先画五个小圆圈：

HTML代码

<div class="loader">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>

CSS代码

.loader span{
	display: inline-block;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	background: black;
	border-radius: 50px;
}

其次，我们来定制动画

CSS代码

.loader span{
	display: inline-block;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	background: black;
	border-radius: 50px;
	-webkit-animation: loader 1s infinite alternate;
	-moz-animation: loader 1s infinite alternate;
}
@-webkit-keyframes loader {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.1;
	}
}
@-moz-keyframes loader {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.1;
	}
}

最后，我们添加延时动画的命令：
CSS代码

.loader span{
	display: inline-block;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	background: black;
	border-radius: 50px;
	-webkit-animation: loader 1s infinite alternate;
	-moz-animation: loader 1s infinite alternate;
}
.loader span:nth-of-type(2) {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
}
.loader span:nth-of-type(3) {
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
}
.loader span:nth-of-type(4) {
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
}
.loader span:nth-of-type(5) {
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
}
@-webkit-keyframes loader {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.1;
	}
}
@-moz-keyframes loader {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.1;
	}
}

最后完成制作。

如需调整个数、时间也可自行根据原理定制，不过最好保证渐变的时间间隔，如果太慢会让人感觉加载有气无力，而太快了又会让人感觉不适。

 

 

• 版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0
• 原文网址：http://soasmeblog.sinaapp.com/posts/46.html