CSS3 transition屬性實現hover漸變動畫效果

我們知道許多網頁動態特效都是由FLASH或JQUERY之類的JS特效庫實現的實際上現在CSS3也能實現很多類似效果了，只是在各種瀏覽器中兼容性稍差， 想要追求簡單極致的效果，就要失去兼容性，而且隨著時間變遷， 瀏覽器標準終究可能還是要統一的。CSS3的Transition屬性， 這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發， 并圓滑地以動畫效果改變CSS的屬性值。

transition:顏色 變換延續的時間 變換速率 transition:background-color 0.3s linear 變換速率： 1、ease：(逐漸變慢)默認值，ease函數等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0). 2、linear：(勻速)，linear 函數等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0). 3、ease-in：(加速)，ease-in 函數等同于貝塞爾曲線(0.42, 0, 1.0, 1.0). 4、ease-out：(減速)，ease-out 函數等同于貝塞爾曲線(0, 0, 0.58, 1.0). 5、ease-in-out：(加速然后減速)，ease-in-out 函數等同于貝塞爾曲線(0.42, 0, 0.58, 1.0) 6、cubic-bezier：(該值允許你去自定義一個時間曲線)， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。

//Mozilla內核 -moz-transition

//Webkit內核 -webkit-transition

//Opera -o-transition

//W3C 標準 transitionhtml>

div?{

width:100px;

height:100px;

background:#e33;

transition:width?2s;

-moz-transition:width?2s;?/*?Firefox?4?*/

-webkit-transition:width?2s;?/*?Safari?and?Chrome?*/

-o-transition:width?2s;?/*?Opera?*/

}

div:hover?{

width:300px;

}

請把鼠標指針移動到藍色的?div?元素上，就可以看到過渡效果。

注釋：本例在低版本?Internet?Explorer?中無效。

總結

以上是生活随笔為你收集整理的悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。