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

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

html部分：

<div class="courseDetailMore" style="padding-bottom:55px;">
    <a href="javascript:;" 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;
}
@keyframes load{
  0% {opacity:1}
  100% {opacity:0.2}
}
@-webkit-keyframes load{
  0% {opacity:1}
    100% {opacity:0.2}
}
@-moz-keyframes load{
  0% {opacity:1}
    100% {opacity:0.2}
}
@-o-keyframes load{
  0% {opacity:1}
    100% {opacity:0.2}
}
@-ms-keyframes load{
  0% {opacity:1}
    100% {opacity:0.2}
}

js部分：

$("#showMore").click(function() {
        $(this).hide();
        $('#showMoreLoad').show();
        setTimeout(function(){
            $("#showMore").show();
            $('#showMoreLoad').hide();
        },5000);

    });

效果：

未点击前：

       

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