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 连接上时,颜色是渐进变化的,移开鼠标时也会有一个颜色渐变的效果,请问是怎样做到的。
高洛峰2017-04-17 11:07:58
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
;