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

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元素采用相对定位定位在浏览器窗口右下角，以便操作。

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

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

点击在线查看实例

如有不足。欢迎交流。

CSS实现回到顶部图片hover后改变效果的更多相关文章

  1. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  2. css+js回到顶部

    .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...

  3. css3 列表图片hover左右滚动效果

  4. 弹幕和回到顶部前端web

    弹幕和回到顶部前端web 弹幕 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

  6. css:hover状态改变另一个元素样式的使用

    效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...

  7. imagecopyresampled()改变图片大小后质量要比imagecopyresized()高。

    php程序中改变图片大小的函数大多数人都想到用imagecopyresized(),不过经过测试比较发现,使用imagecopyresampled()改变的图片质量更高. 下面我们来看看两者的比较结果 ...

  8. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  9. html里面用Jquery移除tr元素后,滚动条会回到顶部问题处理

    问题如下图,删除一行后,滚动条会自动回到顶部,即使先把滚动条禁止也还是会回到顶部 参考这个 https://bbs.csdn.net/topics/392233437 发现确实自己的按钮事件写在了a标 ...

随机推荐

  1. 错误：Only the original thread that created a view hierarchy can touch its views——Handler的使用

    在跟随教程学习到显示web页面的html源码时报错:Only the original thread that created a view hierarchy can touch its views ...

  2. struts2 基础2 类型转换器

    struts2常用常量的定义与意义 每一次请求都会创建一个新的action,所以struts2的action是线程安全的 拆分struts 为应用指定多个struts配置文件 src 下为各应用配置的 ...

  3. 【EWM系列】SAP 关于EWM的WT增强简介

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 关于EWM的WT增强简介   ...

  4. How to increase timeout for your ASP.NET Application ?

    How to increase timeout for your ASP.NET Application ? 原文链接:https://www.techcartnow.com/increase-tim ...

  5. [Git] 001 初识 Git 与 GitHub 之新建仓库

    在 GitHub 的 UI 界面使用 Git 新建一个仓库 1. 点击右上角的 +,选择 New repository 2. 网站会自动跳转至新页面,在下框中填入仓库名 仓库名也有讲究,挖个坑,日后填 ...

  6. mysql树查询、递归查询

    关键词:mysql树查询,mysql递归查询 转自:http://www.cnblogs.com/c-h-y/p/9420726.html 之前一直用的是Oracle,对于树形查询可以使用start ...

  7. 使用Redis共享用户登录成功的信息

    一.问题 比如CSDN,开源中国等等网站,用户登录后不一定什么时候就会把你T了,意思就是不一定哪天在打开网站的时候就让你重新登录.这是怎么回事呢? 再比如:如果存到将用户信息存到Redis了,不清除的 ...

  8. [2019杭电多校第五场][hdu6628]permutation 1

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6628 题意为求字典序第k小的差异数组,差异数组p满足p[i]=a[i+1]-a[i]. 头铁的爆搜,因 ...

  9. yield-Python大牛必须掌握的高端语法

    小白:大牛哥,刚才看到有一个函数不使用return返回结果,而是使用yield关键字返回结果,看不太明白,Python中yield关键字的用途是什么,它有什么作用呀? 大牛: 要想理解yield的作用 ...

  10. centos安装httprunner方法

    测试脚本执行的环境部署(在jenkins服务器中,要求jenkins服务器和目标的灰度环境是连通的): 一.安装python3.8 $python#看见2.6.6Python 2.6.6 (r266: ...