CSS實現滑鼠上移圖示旋轉的特效程式碼分享
- 零下一度原創
- 2017-06-19 10:25:401573瀏覽
這篇文章主要介紹了CSS實現滑鼠上移圖示旋轉效果,需要的朋友可以參考下
滑鼠上移圖示旋轉效果在企業的專案中經常會使用到，特別是頂部導航欄，例如：
接下來就是要使用css實作滑鼠上移圖示旋轉效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p,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>
<p class="box">
<img src="img/down.png" alt=""/>
</p>
</body>
</html>這裡放了一個盒子，盒子裡放了一個圖片，為了能看得更加清晰，這裡放一個比較大的圖片。現在要實現的效果是，滑鼠移到.box的盒子上時，圖示img將會做一個180度的旋轉。
style中，關鍵是img和.box:hover img的設置，首先我們需要先給img設置transition屬性，這裡的屬性指定了動畫的方式和持續時間。然後給.box設定當滑鼠上移時:hover時img的動作為旋轉180度：
transform: rotate(180deg);
下方的如-webkit-的設定主要為了相容各廠商的瀏覽器而設定的。
所得到的效果如下圖：
以上是CSS實現滑鼠上移圖示旋轉的特效程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn