The CSS3 Transition
好久沒寫,今天來分享一下應該是我本業的網頁設計相關文章 XDD
前幾天在 Google Reader 上看到 Zespia 換了新佈景,原本的佈景也是目前這個網誌用的 Slash 不過因為使用者越來越多,所以站長決定換新佈景~
接著,我看到那中間的 “Z” 字 Logo 那透明度緩緩的恢復的效果非常的有興趣,於是,我開始了調查……
原本以為是用 JavaScript 所製作的效果(像是 jQuery 就有 Fade IN/OUT 的效果)不過仔細一看原始碼,就發現「我錯了!」
裡面用著一個名為 transition 的屬性,好奇心一來就開始 Google 使用方法。
嘗試幾次後,大概了解使用了! (中文叫做「漸變」用途大概就是在 CSS 設定值變化時提供一個漸進的變化)
不過以目前瀏覽器大戰的情況來看,用純 CSS 撰寫實在吃力不討好,於是我就用了 Compass 稍微輔助。
|
|
之後在業面上套用屬性,游標一過去之後就會發生變化~
|
|
假設漸變設定在 .box 而非 .box:hover 上,那麼漸變的情會如下:
- 瀏覽器初始化元素
- 瀏覽器套用 CSS 屬性 (第一次漸變,會從 0px * 0px 漸變成 50px * 50 px)
- 觸碰觸發漸變(透明度 30% > 0% )
假設是如上述程式碼來做,那麼第二步驟(變大)的建變就不會有。 所以依照這個原理,在構成頁面區塊時只要設定上建變,就會出現開打開網頁,內容區塊會放大到相應大小的情況。
不過我想只限於內容少於區塊大小的狀態
大致上就是這樣摟~
最近感覺繪畫上的能力進步不少,之後應該也會針對 Illustrator 多加努力,希望之後可以有一套自己風格的網頁設計~
留言