任何网站中回到顶部元素不可缺少，一般为了实现交互效果，都会在鼠标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. 双系统（win10+ubuntu)卸载Ubuntu系统

    之前装的双系统,Win10 和Ubuntu ,系统引导使用的是Ubuntu的Grup的引导, 直接删除Ubuntu会导致引导丢失,会很麻烦,win10直接会挂掉,后期恢复需要重建引导 安全删除思路,先 ...

  2. Rxjava2不能再发射Null了

    RxJava2的最大改变就是不能再流里发射Null了,有人会问发射了就怎么了,答案是你的流会因为NPE断开. 例如下面这段代码因为文件被删了找不到返回null,这时候就不触发下面Consumer的ac ...

  3. struts2 基础3 文件上传、拦截器

    文件上传: 1.将头设置为enctype=”multipart/form-data” <form action="${pageContext.request.contextPath } ...

  4. C++ 全面刨析使用指针方法 _new _delete

    指针 #include<iostream> using namespace std; int main() { ; int* pn;//声明 int* pn = &avr;//初始 ...

  5. 模块内高内聚?模块间低耦合?MVC+EF演示给你看！

    前言 在软件项目开发过程中,我们总能听见“高内聚,低耦合”,即使这种思想在我们学习编程的过程中就已经耳濡目染.可一旦当我们上项目,赶进度的时候我们就会“偷懒”,能省时间就省.管他什么设计模式,什么软件 ...

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

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

  7. 【洛谷p1158】导弹拦截

    这道题是个有想法的枚举qwq 导弹拦截[题目链接] 注意:此导弹拦截非彼导弹拦截p1020 导弹拦截 一道题是1999年的,然后我们现在要写的是经过11年韬光养晦之后的导弹拦截 SOLUTION: 要 ...

  8. HDU 1494 题解（DP）

    题面: 跑跑卡丁车 Problem Description 跑跑卡丁车是时下一款流行的网络休闲游戏,你可以在这虚拟的世界里体验驾驶的乐趣.这款游戏的特别之处是你可以通过漂移来获得一种 加速卡,用这种加 ...

  9. win32 socket编程（四）——服务器端实例（TCP）

    //Server服务器端Server.cpp 1 // 定义控制台应用程序的入口点. // #include "stdafx.h" #include <winsock2.h& ...

  10. Linux性能优化从入门到实战：16 文件系统篇：总结磁盘I/O指标/工具、问题定位和调优

    (1)磁盘 I/O 性能指标 文件系统和磁盘 I/O 指标对应的工具 文件系统和磁盘 I/O 工具对应的指标 (2)磁盘 I/O 问题定位分析思路 (3)I/O 性能优化思路 Step 1:首先采用 ...