CSS實現(xiàn)鼠標上移圖標旋轉效果
發(fā)布時間：2017-06-17 16:40:06 作者：佚名 
我要評論
我要評論這篇文章主要介紹了CSS實現(xiàn)鼠標上移圖標旋轉效果,需要的朋友可以參考下
鼠標上移圖標旋轉效果在企業(yè)的項目中經(jīng)常會使用到，特別是頂部導航欄，比如：
接下來就是要使用css實現(xià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>
這里放了一個盒子，盒子中放了一個圖片，為了能看得更加清晰，這里放一個比較大的圖片?，F(xiàn)在要實現(xiàn)的效果是，鼠標移到.box的盒子上時，圖標img將會做一個180度的旋轉。
style中，關鍵是img和.box:hover img的設置，首先我們需要先給img設置transition屬性，這里的屬性指定了動畫的方式和持續(xù)時長。然后給.box設置當鼠標上移時:hover時img的動作為旋轉180度：
transform: rotate(180deg);
下方的如-webkit-的設置主要為了兼容各廠商的瀏覽器而設置的。
得到的效果如下圖所示：
以上所述是小編給大家介紹的CSS實現(xiàn)鼠標上移圖標旋轉效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
- 這篇文章主要為大家詳細介紹了Html+CSS繪制三角形圖標的相關代碼，很多網(wǎng)頁都有三角形的圖標，通常是切的圖片，這里可以用css3+html寫出三角形，感興趣的小伙伴們可以參考2016-06-17
- 下面小編就為大家?guī)硪黄猚ss圖標與文字對齊的兩種實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給的大家做個參考。一起跟隨小編過來看看吧2016-06-12
- css3功能非常強大，之前需要圖片完成的icon，現(xiàn)在我們只需要幾段css代碼就可以實現(xiàn)此功能。下面給大家分享純css制作的圓，橢圓，三角形箭頭圖標，非常使用，需要的朋友參考2016-03-30
分享18種CSS3漢堡包圖標變形動畫按鈕特效源碼，里面包含18種不同的漢堡包變形動畫效果，可以通過Sass文件來自定義你自己的漢堡包圖標變形動畫，需要的朋友前來下載源碼2016-03-10- 這篇文章主要介紹了Html+css實現(xiàn)純文字和帶圖標按鈕的方法，按鈕有很多種外觀，本文介紹了純文字和帶圖標兩種按鈕，感興趣的小伙伴們可以參考一下2016-02-24
CSS3實現(xiàn)帶動畫的天氣icon圖標特效源碼是一款比較有創(chuàng)意，實用的CSS天氣圖標icon圖標動畫，需要本段代碼的朋友前來下載源碼2016-02-22CSS icon圖標之純CSS實現(xiàn)帶動畫效果的天氣圖標
CSS3動畫屬性并不是很多，但重點其實是你怎樣去運用它，從簡單的hover狀態(tài)或復雜的小動畫，都可以巧妙的用CSS3動畫屬性來實現(xiàn)2016-01-27- 這篇文章主要介紹了用CSS樣式生成搜索、購物車等圖標樣式(圖標字體庫)的相關資料,需要的朋友可以參考下2017-09-07
