郭晓湉通过本文主要向大家介绍了动画,倒计时等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
也可以用animation动画效果去写 只要把动画时间修改成3s即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时demo</title>
</head>
<body>
<div id="countDown" class="">
<img src="images/3.png" style="display:none" alt="">
<img src="images/2.png" style="display:none" alt="">
<img src="images/1.png" style="display:none" alt="">
</div>
</body>
<script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
<script type="text/javascript">
function start(){
var index = 0
timer = setInterval(function(){
$("#countDown").children().hide()
$("#countDown").children().eq(index).show()
if (index == 3){
clearInterval(timer)
$("#countDown").hide()
}
index++
}, 1000)
}
start()
</script>
</html>
动画效果倒计时 CSS部分
@-webkit-keyframes time{ /*透明度由0到1*/
0%{
opacity:0; /*透明度为0*/
}
20%{
opacity:1; /*透明度为1*/
background:url(images/3.png) no-repeat; background-size:100%; display:block; width:71px; height:71px;
}
40%{
opacity:0; /*透明度为1*/
}
60%{
opacity:1; /*透明度为1*/
background:url(images/2.png) no-repeat; background-size:100%;display:block;width:71px; height:71px;
}
80%{opacity:0;}
100%{ opacity:1; /*透明度为1*/
background:url(images/1.png) no-repeat; background-size:100%; display:block;width:71px; height:71px;}
}
.time{
-webkit-animation: time 3s alternate ease-in-out; //设置成三秒
}
HTML部分：
<div class="time"></div>