亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS實現(xiàn)鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果

  發(fā)布時間：2017-06-17 16:40:06   作者：佚名   我要評論
這篇文章主要介紹了CSS實現(xiàn)鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果,需要的朋友可以參考下

鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果在企業(yè)的項目中經(jīng)常會使用到，特別是頂部導(dǎo)航欄，比如：

接下來就是要使用css實現(xiàn)鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        div,img,body{  
            margin: 0;  
            padding: 0;  
        }  
        .box{  
            height: 150px;  
            width:300px;  
            background: #1b7b80;  
            margin: 0 auto;  
            padding: 20px;  
        }  
        .box:hover img{  
            transform: rotate(180deg);  
            -webkit-transform: rotate(180deg);  
            -moz-transform: rotate(180deg);  
            -o-transform: rotate(180deg);  
            -ms-transform: rotate(180deg);  
        }  
        img{  
            margin: 0 auto;  
            display: block;  
            transition: all 0.2s ease-in-out;  
            -webkit-transition: all 0.2s ease-in-out;  
            -moz-transition: all 0.2s ease-in-out;  
            -o-transition: all 0.2s ease-in-out;  
        }  
    </style>  
</head>  
<body>  
    <div class="box">  
        <img src="img/down.png" alt=""/>  
    </div>  
</body>  
</html>

這里放了一個盒子，盒子中放了一個圖片，為了能看得更加清晰，這里放一個比較大的圖片。現(xiàn)在要實現(xiàn)的效果是，鼠標(biāo)移到.box的盒子上時，圖標(biāo)img將會做一個180度的旋轉(zhuǎn)。

style中，關(guān)鍵是img和.box:hover img的設(shè)置，首先我們需要先給img設(shè)置transition屬性，這里的屬性指定了動畫的方式和持續(xù)時長。然后給.box設(shè)置當(dāng)鼠標(biāo)上移時:hover時img的動作為旋轉(zhuǎn)180度：

transform: rotate(180deg);

下方的如-webkit-的設(shè)置主要為了兼容各廠商的瀏覽器而設(shè)置的。
 

得到的效果如下圖所示：
 

以上所述是小編給大家介紹的CSS實現(xiàn)鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論