這篇文章主要介紹CSS3如何實現(xiàn)偽類hover離開時平滑過渡效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),印江企業(yè)網(wǎng)站建設(shè),印江品牌網(wǎng)站建設(shè),網(wǎng)站定制,印江網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,印江網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

大多數(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)鼠標離開div元素的時候，:hover偽類將不再生效，瞬間丟掉hover里寫的動畫效果。

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

    
    
    
    
    
        div{
            width: 100px;
            height: 100px;
            border:1px solid;

            margin:0px auto;
            margin-top: 200px;

            /* 在原本元素上再加一個transition */
            transition: all 1s linear;
        }
        div:hover{
            transform: scale(2);
            transition: all 1s linear;
        }
    


    

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