[CSS] 滑鼠移至文字上漸變顏色

最近發現到很多網站都有使用這樣的功能,尤其是使用WordPress或Blogger的部落客,由於CSS的自由度高,對於網站的精緻程度也會要求更臻完美,在這些部落格的首頁上,滑鼠移到文章的標題時,會發現標題的文字從黑色漸漸變成淡藍或橘色,或任何和他們的網站風格匹配的顏色,感覺蠻生動的,所以我就去Google了一下啦,原來這樣的功能只需要CSS的幾句語法就可以實現。


滑鼠移過文字,會觸發顏色變化,但這中間有延遲的時間,這是CSS3的語法,雖然酷炫,不過不是每個瀏覽器都支援,尤其是古早味的IE,版本9以下。不過我想現在就算還有死忠的IE迷,也不會再用早期的版本吧。

本篇文章的語法及參考解釋來自 – 樂在設計

而這個神祕的CSS語法,就是transition,以下是它的參數設定簡單的介紹。

參數設定

transition: [屬性] [變換持續時間] [變換效果] [延遲時間];

[屬性](property):指定效果要套用在哪個屬性上,如文字顏色color,背景顏色background。

[變換持續時間](duration):如果設為0就與原本相同,設越大則變換持續時間越長。

[變換效果](timing-function):見下一節。

[延遲時間](delay):在變換顏色之前的延遲時間,可不設定。

變換效果

  • linear:均速
  • ease:很快→漸慢
  • ease-in:漸漸變快
  • ease-out:漸漸變慢
  • ease-in-out:漸快→慢下來→漸快
  • cubic-bezier( 0.1, 0.5 , 0.1 , 0.5):其中的0.1及0.5可以調整成其他小數,這代表貝賽爾曲線的4個點值。
移植範例

a{
    color: #06c;
}
a:hover{
    color:#5AA0E6;
    -o-transition: color .20s linear;
    -webkit-transition: color .20s linear;
    -moz-transition: color .20s linear;
    transition:  color .20s linear;
}

  •  
  •  
  •  
  •  
  •  
  •  

發表迴響