css3-Loading加载动态效果及@keyframes用法

有时候，我们想要一个有关 加载 的旋转动态效果，插件没有自己满意的，那么下面介绍一个可以自己修改颜色，大小的方法。

html部分：

<div class=\"courseDetailMore\" style=\"padding-bottom:55px;\">
    <a href=\" :;\" id=\"showMore\">显示更多</a>
	<div class=\"main\" id=\"showMoreLoad\">
        <div class=\"loadEffect\">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>

css部分：

.courseDetailMore {
	margin-top: 40px;
}
.courseDetailMore a {
	display: block;
	width: 160px;
	height: 38px;
	margin: 0 auto;
	text-align: center;
	line-height: 36px;
	font-size: 14px;
	color: #2DBE60;
	border: 1px solid #2DBE60;
	border-radius: 5px;
}
.courseDetailMore a::after {
	content: \'>>\';
	position: relative;
	top: -2px;
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	color: #2DBE60;
	letter-spacing: -4px;
	transform: rotate(90deg);
}
//loading样式
.courseDetailMore .main{
	display: none;
}
.courseDetailMore .loadEffect {
    width: 60px;
    height: 60px;
    position: relative;
    margin: 0 auto;
}
.courseDetailMore .loadEffect span {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
}
.courseDetailMore .loadEffect span:nth-child(1) {
    left: 0;
    top: 50%;
    margin-top: -6px;
    -webkit-animation-delay: 0.13s;
}
.courseDetailMore .loadEffect span:nth-child(2) {
    left: 7px;
    top: 7px;
    -webkit-animation-delay: 0.26s;
}
.courseDetailMore .loadEffect span:nth-child(3) {
    left: 50%;
    top: 0;
    margin-left: -6px;
    -webkit-animation-delay: 0.39s;
}
.courseDetailMore .loadEffect span:nth-child(4) {
    top: 7px;
    right: 7px;
    -webkit-animation-delay: 0.52s;
}
.courseDetailMore .loadEffect span:nth-child(5) {
    right: 0;
    top: 50%;
    margin-top: -6px;
    -webkit-animation-delay: 0.65s;
}
.courseDetailMore .loadEffect span:nth-child(6) {
    right: 7px;
    bottom: 9px;
    -webkit-animation-delay: 0.78s;
}
.courseDetailMore .loadEffect span:nth-child(7) {
    bottom: 0;
    left: 50%;
    margin-left: -6px;
    -webkit-animation-delay: 0.91s;
}
.courseDetailMore .loadEffect span:nth-child(8) {
    bottom: 9px;
    left: 7px;
    -webkit-animation-delay: 1.04s;
}
@key s load{
  0% {opacity:1}
  100% {opacity:0.2}
}
@-webkit-key s load{
  0% {opacity:1}
    100% {opacity:0.2}
}
@-moz-key s load{
  0% {opacity:1}
    100% {opacity:0.2}
}
@-o-key s load{
  0% {opacity:1}
    100% {opacity:0.2}
}
@-ms-key s load{
  0% {opacity:1}
    100% {opacity:0.2}
}

效果：

未点击前：

点击后：当然是动态旋转的哦！