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

任何网站中回到顶部元素不可缺少，一般为了实现交互效果，都会在鼠标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();对其进行平移，从而实现交互效果。

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

 

点击在线查看实例

如有不足。欢迎交流。

 

posted @ 2018-12-05 12:22  长安夜未央  阅读(649)  评论(0)  编辑  收藏  举报