JSカウントダウンdemo

8384 ワード

HTML 5

画像はカウントダウン効果を表示してアニメーションの効果で書くことができてアニメーションの時間を3 sに修正するのでさえすれば


<html>
  <head>
    <meta charset="utf-8">
    <title>   demotitle>
  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>

onsubmitフォームのコミットを阻止

3 D回転万丈光牢