JS倒计时demo

最新推荐文章于 2021-06-27 06:12:29 发布

郭晓湉

最新推荐文章于 2021-06-27 06:12:29 发布

阅读量974

点赞数

分类专栏： HTML5 文章标签：动画倒计时

HTML5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

图片显示倒计时效果
也可以用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; //设置成三秒 
     }