每日計劃-html+css作品：一個載入動畫

標籤：style   blog   class   code   java   ext   

 動畫挺簡單，關鍵是漸隱漸現的次序及時間

那個縮放可以去掉的，懶得調了...

<style>        #show {          height : 140px;          width : 150px;          margin:auto;          margin-top:45%;          transform: scale(2,2)        }                #load {font-family : Arial; text-align : center; padding-top:20px; }        .t{             height:30px;              width:30px;             float:left;             background-color:black;             opacity : 0;             animation : transform 4s infinite;             position:absolute;            }        #transform{margin-top:30px; width:100%; position:relative; }        #t1 { left:20px;}        #t2 {left:60px; animation-delay : 0.5s;}        #t3 {left:100px; animation-delay : 1s;}                @keyframes transform {          0% { opacity : 0;}          20% { opacity : 1;}          40% { opacity : 0;}          60% { opacity : 0;}          80% { opacity : 1;}          100% { opacity : 0;}        }</style><div id="show">    <div id="load">        loading...      </div>  <div id="transform">      <div class="t" id="t1">&nbsp;</div>    <div class="t" id="t2"></div>    <div class="t" id="t3"></div></div>

 

loading...