再來一篇換湯不換藥的範例,我們稱它為滑動廣告!以往此種效果的呈現必須使用 jQuery 或 Flash 來完成,但不會撰寫前面兩個語法的人就只能望洋興嘆了!
現在您只要具備 CSS 的基本觀念就可利用 CSS3 Transition 輕易地製做出動畫效果了。但礙於 IE 瀏覽器的限制,各位僅能用其他主流瀏覽器來預視。其製作的觀念是與前篇一模一樣,僅僅是 HTML 結構不一樣而已!學會這招後,您也可以輕易的用 CSS3 Transition 撰寫出各式各樣地動畫呈現,請各位仔細聽我說來…
若還不熟悉請見以下兩篇文章~
簡單的描述一下 <div> 的關鍵屬性:
- <div.mask>:設定 overflow 為 hidden,將超出範圍的部份隱藏起來。
- <div.boxWrap>:包覆 <div.box1> 與 <div.bo2> 區塊,便於移動控制。
- <div.box1>:放入所需資訊。
- <div.box2>:放入所需資訊。
載入畫面後的一般狀態如下圖左所示;當滑鼠滑入(:hover)到 <div.boxWrap> 時,區塊屬性的變化如下圖右所示:
聰明的各位是不是已經發現不同點了呢?
沒錯!!就是在滑入的狀態時,<div.boxWrap> 區塊的 margin-top 的屬性值設定為 -179 px,使得整個區塊往上移動。由於上層區塊(父層)<div.mask> 設定了 overflow 屬性,所以超出 <div.mask> 的部份得以隱藏。接下來,我們就來看一下 CSS3 coding。
載入畫面時的一般狀態,其 CSS 設定如下:
再來…加上擬類別的( :hover )狀態,並設定其屬性值即可完成。
前綴詞的使用
目前 W3C 制定的規則中已漸漸地支援部分 CSS3 屬性,但亦有些尚未支援,故要使用各家瀏覽器的專用前綴詞才可得到最佳瀏覽效果!
Firefox | Google Chrome | Safari | Opera | IE |
---|---|---|---|---|
-moz- | -webkit- | -webkit- | -o- | -ms- |
目前 IE6、7、8、9 尚未完全支援 CSS3 Transition,故使用 IE 的前綴詞並無任何效用。在範例中有加上 IE 前綴詞只是以防未來支援時使用。
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!