CSS实现回到顶部图片hover后改变效果

任何网站中回到顶部元素不可缺少，一般为了实现交互效果，都会在鼠标hover后元素样式有所改变。今天这个实例便是采用CSS中的transform知识实现。

CSS实现回到顶部图片hover后改变效果-LMLPHP hover：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>回到顶部</title>

     <link rel="shortcut icon" href="http://www.cdtu6129.cn/img/favicon.ico" type="image/x-icon">

     <style type="text/css">

         *{

             margin: 0;

             padding: 0;

             content: "";

         }

         #backtop{

             width: 28px;

             height: 46px;

             overflow: hidden;

             cursor: pointer;

             position: fixed;

             right: 200px;

             bottom: 50px;

         }

         #backtop img:hover{

             transform: translateX(-38px);

         }

     </style>

 </head>

 <body>

     <div id="backtop">

         <img src="http://cnblogs.cdtu6129.cn/img/backtop.png">

     </div>

 </body>

 </html>

#backtop元素采用相对定位定位在浏览器窗口右下角，以便操作。

CSS实现回到顶部图片hover后改变效果-LMLPHP

图片采用一张大图，当鼠标hover后采用transform: translateX();对其进行平移，从而实现交互效果。

不仅减少了代码，而且通过减少图片数量提高了网页性能。

点击在线查看实例

如有不足。欢迎交流。

Hover

CSS实现回到顶部图片hover后改变效果