這篇文章主要為大家展示了“如何使用CSS3實(shí)現(xiàn)偽類hover離開時平滑過渡效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用CSS3實(shí)現(xiàn)偽類hover離開時平滑過渡效果”這篇文章吧。

成都創(chuàng)新互聯(lián)公司是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、小程序開發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10余年以來，已經(jīng)為近1000家成都生料攪拌車各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的近1000家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

由于hover偽類添加的動畫效果,僅當(dāng)鼠標(biāo)放在元素上時會被觸發(fā),而當(dāng)鼠標(biāo)離開時,效果會中斷,會顯得很生硬.

大多數(shù)人的想法都是使用js的onmouseover和onmouseleave事件來實(shí)現(xiàn)動畫效果.其實(shí)不必這么麻煩,CSS3便可以幫你解決這些問題.

離開時效果生硬

div{

width: 100px;

height: 100px;

border:1px solid;

margin:0px auto;

margin-top: 200px;

}

div:hover{

transform: scale(2);

transition: all 1s linear;

}

由于div元素只有在:hover偽類觸發(fā)的時候,效果才能加到div元素上.

當(dāng)鼠標(biāo)離開div元素的時候,:hover偽類將不再生效,瞬間丟掉hover里寫的動畫效果.

此時,我們應(yīng)當(dāng)在原本元素上再寫一個一模一樣的transition效果,將離開斷掉的動畫效果續(xù)接上.

簡單解決

div{

width: 100px;

height: 100px;

border:1px solid;

margin:0px auto;

margin-top: 200px;

transition: all 1s linear;

}

div:hover{

transform: scale(2);

transition: all 1s linear;

}

此時,不管鼠標(biāo)在什么時候離開元素,都會原樣返回.

以上是“如何使用CSS3實(shí)現(xiàn)偽類hover離開時平滑過渡效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！