The CSS3 Transition

好久沒寫，今天來分享一下應該是我本業的網頁設計相關文章 XDD

前幾天在 Google Reader 上看到 Zespia 換了新佈景，原本的佈景也是目前這個網誌用的 Slash 不過因為使用者越來越多，所以站長決定換新佈景～

接著，我看到那中間的 “Z” 字 Logo 那透明度緩緩的恢復的效果非常的有興趣，於是，我開始了調查……

原本以為是用 JavaScript 所製作的效果（像是 jQuery 就有 Fade IN/OUT 的效果）不過仔細一看原始碼，就發現「我錯了！」

裡面用著一個名為 transition 的屬性，好奇心一來就開始 Google 使用方法。

嘗試幾次後，大概了解使用了！
（中文叫做「漸變」用途大概就是在 CSS 設定值變化時提供一個漸進的變化）

不過以目前瀏覽器大戰的情況來看，用純 CSS 撰寫實在吃力不討好，於是我就用了 Compass 稍微輔助。

site.css.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@import "compass";
@import "compass/reset";
@import "compass/CSS3"; //屬於 CSS3 的功能
@include global-reset; //CSS Reset
body {
truepadding: 10pxl
}
//漸變方塊
.box {
truebackground: adjust-lightness(blue, 30);
truewidth: 50px;
trueheight: 50px;
true@include opacity(0.7); //透明度 30%
true@include border-radius(50%); //呈現球體
}
.box:hover {
true@include opacity(1); //透明度 0% (不透明)
true@include transition-duration(0.3s); //0.3秒完成漸變
}

之後在業面上套用屬性，游標一過去之後就會發生變化～

1
2
<div class="box"></div>

假設漸變設定在 .box 而非 .box:hover 上，那麼漸變的情會如下：

  1. 瀏覽器初始化元素
  2. 瀏覽器套用 CSS 屬性 (第一次漸變，會從 0px 0px 漸變成 50px 50 px)
  3. 觸碰觸發漸變（透明度 30% > 0% ）

假設是如上述程式碼來做，那麼第二步驟（變大）的建變就不會有。
所以依照這個原理，在構成頁面區塊時只要設定上建變，就會出現開打開網頁，內容區塊會放大到相應大小的情況。

不過我想只限於內容少於區塊大小的狀態

大致上就是這樣摟～

最近感覺繪畫上的能力進步不少，之後應該也會針對 Illustrator 多加努力，希望之後可以有一套自己風格的網頁設計～

留言