您好,登錄后才能下訂單哦!
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于css3中如何利用transition實(shí)現(xiàn)鼠標(biāo)懸停的時(shí)候div的顏色、高度和寬度都改變的效果,有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。
我們平時(shí)在瀏覽web網(wǎng)頁(yè)的時(shí)候會(huì)見(jiàn)到這樣一種情況:當(dāng)鼠標(biāo)懸停的某個(gè)區(qū)域的時(shí)候,該區(qū)域的形狀會(huì)在指定時(shí)間內(nèi)進(jìn)行放大或者縮小的變化,甚至在變化大小的同時(shí)會(huì)出現(xiàn)顏色的漸變。這種特殊效果是如何實(shí)現(xiàn)的呢?現(xiàn)在由我來(lái)向大家介紹一下在css3中如何使用transition屬性和hover屬性實(shí)現(xiàn)div顏色漸變和放大縮小的效果。
css3中transition屬性
transition屬性是一個(gè)簡(jiǎn)寫(xiě)屬性,用于四個(gè)過(guò)度屬性,分別是transition-property,transition-duration,transition-timing-function和transition-delay。
transition-property:要運(yùn)動(dòng)的樣式(默認(rèn)值為all,可以有三種定義:all、attr和none)
transition-duration:運(yùn)動(dòng)時(shí)間(只有運(yùn)動(dòng)時(shí)間是必需值并且不能為0,否則transition不會(huì)有任何效果)
transition-timing-function:運(yùn)動(dòng)形式(用法包括以下六種)
ease:(逐漸變慢)
linear:(勻速)
ease-in:(加速)
ease-out:(減速)
ease-in-out:(先加速后減速)
cubic-bezier 貝塞爾曲線:( x1, y1, x2, y2 )
注意:其中如果沒(méi)有定義的話,transition-timing-function默認(rèn)值為ease。
transition-delay:延遲時(shí)間(默認(rèn)值為0)
transition屬性和瀏覽器的兼容(根據(jù)W3C標(biāo)準(zhǔn))
Internet Explorer 10、Firefox、Opera和Chrome等高版本瀏覽器支持transition屬性標(biāo)準(zhǔn)寫(xiě)法。Safari支持替代的-webkit-transition 屬性。但是Internet Explorer 9以及更早版本的瀏覽器不支持transition屬性。
css3鼠標(biāo)移入特效的實(shí)現(xiàn)代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>transition</title> <style> .box{ width:100px; height:100px; background-color:blue; transition-duration:2s; transition-timing-function:ease; transition-delay:0s; transition-property:all; } .box:hover{ width:200px; height:200px; background-color:red; } </style> </head> <body> <div class="box"></div> </body> </html>
css3鼠標(biāo)移入特效實(shí)現(xiàn)效果如圖所示
以上就是css3鼠標(biāo)移入特效:如何實(shí)現(xiàn)div顏色漸變和放大縮小的效果的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注億速云其它相關(guān)文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。