問題描述

a{ color: #0088cc; text-decoration: none; &:hover, &:active, &:focus{color: orange;text-decoration: none;-webkit-transition: color 250ms ease-in 0ms;-moz-transition: color 250ms ease-in 0ms;-ms-transition: color 250ms ease-in 0ms;-o-transition: color 250ms ease-in 0ms;transition: color 250ms ease-in 0ms; }}

在alloyteam blog看到的一個效果。就是鼠標移動到 a 連接上時，顏色是漸進變化的，移開鼠標時也會有一個顏色漸變的效果，請問是怎樣做到的。

問題解答

a{ color: #0088cc; text-decoration: none; -webkit-transition: color 250ms ease-in 0ms; -moz-transition: color 250ms ease-in 0ms; -ms-transition: color 250ms ease-in 0ms; -o-transition: color 250ms ease-in 0ms; transition: color 250ms ease-in 0ms; &:hover, &:active, &:focus{color: orange; }}回答2：

a:link, a:visited, a:active {text-decoration: none;-webkit-transition: ...;-moz-transition: ...;-ms-transition: ...;-o-transition: ...;transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;}

transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;這一行中定義了指定兩個屬性的動畫：text-shadow跟color，你說的顏色漸進就是color 500ms ease-in 0m；可以理解為：執行變化的屬性：color；動畫持續時間：500ms；時間函數（定義了執行動畫的方式）：ease-in（由慢到快）；延遲時間：0m；