任何网站中回到顶部元素不可缺少，一般为了实现交互效果，都会在鼠标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. 【FICO系列】SAP FICO 基本概念

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP FICO 基本概念   ...

  2. LeetCode——707 设计链表

    题目: 总而言之就是要用C++手撸链表,我的代码: class MyLinkedList { public: /** Initialize your data structure here. */ M ...

  3. 一些输出、处理细节&注意点

    https://blog.csdn.net/qq_41071646/article/details/79953476 输出百分比的时候,结果需要加上一个EPS(1e-6)四舍五入保证精度. 卡精度—— ...

  4. Spring Framework基础学习

    Spring Framework基础学习 Core support for dependency injection,transaction management,web applications,d ...

  5. Maven系列学习(三)Maven生命周期和插件

    Maven生命周期和插件 Maven另外的两个核心概念就是生命周期和插件,Maven的生命周期都是抽象的,其实实际行为都是由插件来完成的,生命周期和插件两者协同工作 1.生命周期 Maven的生命周期 ...

  6. python列表-增强的赋值操作

    增强赋值公式 (1) (2) (3) (4)

  7. linux中常用的60个命令及作用详解

    Linux 必学的 60 个命令 Linux 提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在 Linux 系统上工作离不开使用系统 ...

  8. [19/05/19-星期日] CSS_css的声明和选择器

    一.引言 HTML的作用是负责数据的格式展示,如果使用它来搞数据的样式,则发现样式书写出来太麻烦,不易于维护: HTML可以有效组织数据的展示,但是不同类型数据在浏览器中的分布没有办法展示. HTML ...

  9. Feign负载均衡

    Feign是一个声明式的Web Service客户端,比Ribbon好用,默认也是轮巡.我们只需要使用Feign创建一个接口,并用注解就好了.如果你基于spring cloud发布一个接口,实际上就是 ...

  10. Elasticsearch7.X 入门学习第一课笔记----基本概念

    原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...