欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

接下來(lái)就是要使用css實(shí)現(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>

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

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

transform: rotate(180deg);

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

得到的效果如下圖所示：
 

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

相關(guān)文章

最新評(píng)論