css3控制多重動畫效果

標籤：css3   transform   transition   動畫   

今天看到一個類似於門窗開關效果。想著用css3實現，當然js是可以必須能夠實現的。我主要想體驗一把css3的神奇。

0102

01圖片縮小，縮小到看不到之後，出現02圖片放大的效果。

實現原理：用一個外層div來觸發hover效果，裡面套兩個圖片div，

分別為圖一和圖二

主要使用css3的transform和transition效果，而且比較重點的是transition-delay延時屬性。

具體代碼

html--------------------------

 <div id="out">      <div id="in1"> <img src="./images/990ad_01.jpg"></div>      <div id="in2"> <img src="./images/990ad_03.jpg"></div>    </div>

css部分---------------------------------------

 #out{width:321px; height:339px; overflow:hidden; position:relative;}    #in1{float:left;}    #in2{display:block; float:left;transform:scale(0,1);}    #out:hover #in1{transform:scale(0,1); transition:all 0.5s linear;}    #out:hover #in2{transition:all 0.3s linear 0.35s;transform:scale(1,1);    display:block; float:left; position:absolute; top:0px; left:0px;}