【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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 樣式的其它效果,請參考 這裏






沒有留言: