關于CSS3 動畫transition的一個問題
問題描述
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 連接上時，顏色是漸進變化的，移開鼠標時也會有一個顏色漸變的效果，請問是怎樣做到的。
問題解答
回答1：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；
相關文章：
1. angular.js - Angular路由和express路由的組合使用問題2. 網絡傳輸協議 - 以下三種下載方式有什么不同？如何用python模擬下載器下載？3. java 排序的問題4. 表單提交驗證，沒反應，求老師指點5. 我的html頁面一提交，網頁便顯示出了我的php代碼，求問是什么原因？6. 如何修改phpstudy的phpmyadmin放到其他地方7. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？8. tp6表單令牌9. node.js - gulp文件監聽的問題10. php - mysql中，作為主鍵的字段，用int類型，是不是比用char類型的效率更高？
網公網安備