任何网站中回到顶部元素不可缺少，一般为了实现交互效果，都会在鼠标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();对其进行平移，从而实现交互效果。
不仅减少了代码，而且通过减少图片数量提高了网页性能。
如有不足。欢迎交流。