bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSS如何實現鼠標上移圖標旋轉效果-創新互聯

這篇文章主要介紹了CSS如何實現鼠標上移圖標旋轉效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創新互聯專注于企業成都營銷網站建設、網站重做改版、萍鄉網站定制設計、自適應品牌網站建設、H5技術、商城網站建設、集團公司官網建設、成都外貿網站制作、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為萍鄉等各大城市提供網站開發制作服務。

鼠標上移圖標旋轉效果在企業的項目中經常會使用到，特別是頂部導航欄，比如：

CSS如何實現鼠標上移圖標旋轉效果

接下來就是要使用css實現鼠標上移圖標旋轉效果。

<!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>

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

style中，關鍵是img和.box:hover img的設置，首先我們需要先給img設置transition屬性，這里的屬性指定了動畫的方式和持續時長。然后給.box設置當鼠標上移時:hover時img的動作為旋轉180度：

transform: rotate(180deg);

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

得到的效果如下圖所示：

CSS如何實現鼠標上移圖標旋轉效果

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS如何實現鼠標上移圖標旋轉效果”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯網站建設公司，，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

本文題目：CSS如何實現鼠標上移圖標旋轉效果-創新互聯
本文URL：http://vcdvsql.cn/article14/cceode.html

成都網站建設公司_創新互聯，為您提供域名注冊、自適應網站、虛擬主機、網站收錄、網站內鏈、電子商務

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

搜索引擎優化