如何使用CSS3實現(xiàn)偽類hover離開時平滑過渡效果

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

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

　　大多數(shù)人的想法都是使用js的onmouseover和onmouseleave事件來實現(xiàn)動畫效果.其實不必這么麻煩,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實現(xiàn)偽類hover離開時平滑過渡效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！