CSS3 轉場效果-Transition 樣式

CSS3 支援了轉場樣式 Transition ,善用此樣式可以讓網頁輕易展現豐富細膩的動畫效果。例如以下兩個方塊 A 與 B ,將滑鼠滑鼠游標移至方塊時,顏色會從藍色轉換為紅色,離開時則回復為藍色。

A
B

方塊 A 套用了transition樣式,因此顏色的轉換過程是以漸進式動畫呈現,方塊B未套用transition樣式,因此顏色直接跳轉而沒有中間的轉換過程。以下為兩個方塊的配置:

<div style="overflow:hidden;">
<div id="SQUAREA">
A
</div>
<div id="SQUAREB">
B
</div>
</div>

第一個方塊為 SQUAREA ,第二個方塊為 SQUAREB ,設定義式如下:


<style>
#SQUAREA{width:160px;height:40px;…;transition:background-color 2s;}
#SQUAREB{width:160px;height:40px;…}

#SQUAREA:hover{
background-color:maroon;
}
#SQUAREB:hover{
background-color:maroon;
}
</style>

請特別注意,其中的 SQUAREA 設定了 transition 樣式,表示當background-color樣式發生變化時,以2秒的時間完成轉換,如此一來,當 hover 樣式最用時變會產生效果。只要完成指定,transition可以在其它的樣式改變時亦發生作用。

transition 搭配另外一組 CSS3 Transform 樣式,可以輕易的讓網頁達到更多炫目的效果,例如將滑鼠游標移至書籍封面即可令其自動旋轉。

     


CSS3 Transform 樣式的其它效果,請參考 這裏






沒有留言: