|
一個簡單的變換
讓我們假設一個簡單的變換，在用戶的鼠標經過一個鏈接的時候，將顏色從一個變換成另外一個。與其它CSS屬性一樣，變換也是直接添加到要使用它的選擇器中。該屬性可以采用下面的4個值。 CSS property：
被變換的屬性(比如, color)�？匆幌孪旅娴谋砀窳私馑锌梢员蛔儞Q的CSS屬性列表。 Duration：
變換持續(xù)的時間，通常以秒來計算(比如, .25s). Timing function：
允許你控制持續(xù)的時間的計算方式。與其使用一個簡單的線性計算，你可以使變換加速(漸入)或者減速(淡出)，或者甚至specify a beat or count (比如，linear). More on this later in the article. Delay：
在動作和變換開始之間等待多久，通常用秒來表示(比如, .1s)。如果你不想延遲，該值可省略。
因為變換屬性始于Webkit擴展，我們不得不同時使用transition 和-webkit-transition 屬性以向后兼容。
讓我們首先提阿賈這這些屬性到:hover 偽類中：
a:hover {
color: red;
-webkit-transition: color .25s linear;
transition: color .25s linear;
}
那么現(xiàn)在，當鼠標經過一個鏈接，不會直接從藍色跳轉到紅色，而是用四分之一秒的時間逐漸變換它們的中間顏色(過渡顏色)。
當然，我們也希望變換回到默認的鏈接顏色，那么我們可以添加一個變換到:link (以及:visited)偽類上，并在它褪去之前添加一個簡單的延遲(十分之一秒) ：
a:link, a:visited {
color: blue;
-webkit-transition: color .25s linear .1s;
transition: color .25s linear .1s;
}
出處：前端觀察
責任編輯：bluehearts
上一頁 CSS3變換入門 [2] 下一頁 CSS3變換入門 [4]
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 CSS3變換入門 [3]
