CSS3 transition屬性實(shí)現(xiàn)hover漸變動(dòng)畫效果

我們知道許多網(wǎng)頁動(dòng)態(tài)特效都是由FLASH或JQUERY之類的JS特效庫實(shí)現(xiàn)的實(shí)際上現(xiàn)在CSS3也能實(shí)現(xiàn)很多類似效果了，只是在各種瀏覽器中兼容性稍差， 想要追求簡單極致的效果，就要失去兼容性，而且隨著時(shí)間變遷， 瀏覽器標(biāo)準(zhǔn)終究可能還是要統(tǒng)一的。CSS3的Transition屬性， 這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)， 并圓滑地以動(dòng)畫效果改變CSS的屬性值。

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

//Mozilla內(nèi)核 -moz-transition

//Webkit內(nèi)核 -webkit-transition

//Opera -o-transition

//W3C 標(biāo)準(zhǔn) 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;

}

請(qǐng)把鼠標(biāo)指針移動(dòng)到藍(lán)色的?div?元素上，就可以看到過渡效果。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。