CSS實現回到頂部圖片hover後改變效果
阿新 • • 發佈：2018-12-05
任何網站中回到頂部元素不可缺少，一般為了實現互動效果，都會在滑鼠hover後元素樣式有所改變。今天這個例項便是採用CSS中的transform知識實現。
hover：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>回到頂部</title> 6 <link rel="shortcut icon" href="http://www.cdtu6129.cn/img/favicon.ico"type="image/x-icon"> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 content: ""; 12 } 13 #backtop{ 14 width: 28px; 15 height: 46px; 16 overflow: hidden; 17 cursor: pointer; 18 position: fixed; 19 right: 200px; 20 bottom: 50px; 21 } 22 #backtop img:hover{ 23 transform: translateX(-38px); 24 } 25 </style> 26 </head> 27 <body> 28 <div id="backtop"> 29 <img src="http://cnblogs.cdtu6129.cn/img/backtop.png"> 30 </div> 31 </body> 32 </html>
#backtop元素採用相對定位定位在瀏覽器視窗右下角，以便操作。
圖片採用一張大圖，當滑鼠hover後採用transform: translateX();對其進行平移，從而實現互動效果。
不僅減少了程式碼，而且通過減少圖片數量提高了網頁效能。
如有不足。歡迎交流。