原生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>")
}
.....