css3实现加载中的转圈圈效果载入动画，看完简直觉得自己又强大了一点点

先看效果

人很话不多，直接上代码

css

.aaa{
	width: 50px;
	height: 50px;
	position: relative;
	margin: 0 auto;
	background-color: #000000;
}
.aaa span{
	width: 8px;
	height: 8px;
	background-color: #fff;
	position: absolute;
	border-radius: 50%;
	-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(.3);
        opacity: 0.5;
    }
}
.aaa span:nth-child(1){
	left: 0;
	top: 50%;
	margin-top: -4px;
	-webkit-animation-delay: 0.13s;
}
.aaa span:nth-child(2){
	left: 5px;
	top:5px;
	-webkit-animation-delay: 0.26s;
}
.aaa span:nth-child(3){
	left: 50%;
	top:0;
	margin-left: -4px;
	-webkit-animation-delay: 0.39s;
}

.aaa span:nth-child(4){
	right: 5px;
	top:5px;
	-webkit-animation-delay: 0.52s;
}
.aaa span:nth-child(5){
	right: 0;
	top: 50%;
	margin-top: -4px;
	-webkit-animation-delay: 0.65s;
}
.aaa span:nth-child(6){
	right: 5px;
	bottom:5px;
	-webkit-animation-delay: 0.78s;
}
.aaa span:nth-child(7){
	left: 50%;
	bottom:0;
	margin-left: -4px;
	-webkit-animation-delay: 0.91s;
}
.aaa span:nth-child(8){
	left: 5px;
	bottom:5px;
	-webkit-animation-delay: 1.04s;
}

HTML

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

想让自己进步一定要好好看上面的代码或自己调试下，只有知道了原来我们才能更上一层楼，当然也可以直接c和v加上一点点的修改就可以直接使用