CSS實現(xiàn)鼠標上移圖標旋轉效果

2024-07-11 08:32:15

字體：大中小

來源：轉載

供稿：網(wǎng)友

鼠標上移圖標旋轉效果在企業(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>

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

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

transform: rotate(180deg);

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

得到的效果如下圖所示：