原生CSS实现加载跑马灯动画

需求： 我们当用户输入完验证码以后会自动进行提交，这时候我们只需要判断这个长度是否达到我们的预定要求，如果达到了我们就可以进行实现跑马灯动画的切换，当然，我们可以使用一些动画库进行实现，下面我是使用原生css进行写这个动画！在Jquery中如何去实现呢？下面就通过代码进行实现

首先是引入Jquery，我是引入本地的jQuery，也可以引入CDN的方式进行加载Jquery

<script src="./js/jquery-1.11.1.min.js"></script>

定义一个div，这边需要实现在按钮中进行实现，我这边通过css将它修饰成一个button

<input type="tel" maxlength="6" class="real-ipt">
<div class="btn next gray">Next</div>

定义一个过度动画，类似跑马灯的样式

.item {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #fff;
	margin-left: 10px;
	opacity: .8;
	z-index: 333;
}

/*  每一个span标签分别去执行自己的动画，记得需要添加延迟和过度，视觉上才会有跑马灯的效果 */
.i1 {
	animation: 2s party_ball1 infinite .2s;
}

.i2 {
	animation: 2s party_ball2 infinite  .4s;
}

.i3 {
	animation: 2s party_ball3 infinite  .6s;
}

@keyframes party_ball3 {
	0% {
		opacity: 0;
		transition-delay: 1s;
	}

	100% {
		opacity: .8;
		transition-delay: 1s;
		background-color: #ccc;
	}
	0% {
		opacity: .1;
		transition-delay: 1s;
	}
}

@keyframes party_ball2 {
	0% {
		opacity: 0;
		transition-delay: 1s;
	}

	100% {
		opacity: .8;
		transition-delay: 1s;
		background-color: #ccc;
	}
	0% {
		opacity: .1;
		transition-delay: 2s;
		
	}
}
@keyframes party_ball1 {
	0% {
		opacity: 1;
		transition-delay: 1s;
	}

	100% {
		opacity: .8;
		transition-delay: 1s;
		background-color: #ccc;
	}
	0% {
		opacity: .1;
		transition-delay: 1s;
	}
}

我们通过Jquery提供的append进行标签的动态加载，最后就可以实现了，下面是大概实现的内容

var val = $('.real-ipt').html()
		.....
if(val.length == 6) {
	// 首先是清空这个内容
	 $('.btn').html("")
	 
	// 然后进追加一个写好的item样式的标签
	 $('.btn').append("<span class='item i1'></span><span class='item i2'></span><span class='item i3'></span>")
}

		.....