CSS实现回到顶部图片hover后改变效果
任何网站中回到顶部元素不可缺少，一般为了实现交互效果，都会在鼠标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后改变效果的更多相关文章
- html css jquery 回到顶部按钮
今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...
- css+js回到顶部
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...
- css3 列表图片hover左右滚动效果
- 弹幕和回到顶部前端web
弹幕和回到顶部前端web 弹幕 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> &l ...
- 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）
回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...
- css:hover状态改变另一个元素样式的使用
效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...
- imagecopyresampled()改变图片大小后质量要比imagecopyresized()高。
php程序中改变图片大小的函数大多数人都想到用imagecopyresized(),不过经过测试比较发现,使用imagecopyresampled()改变的图片质量更高. 下面我们来看看两者的比较结果 ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
- html里面用Jquery移除tr元素后,滚动条会回到顶部问题处理
问题如下图,删除一行后,滚动条会自动回到顶部,即使先把滚动条禁止也还是会回到顶部 参考这个 https://bbs.csdn.net/topics/392233437 发现确实自己的按钮事件写在了a标 ...
随机推荐
- fiddler之简单的接口性能测试
在针对某一个/某一些接口,发送相同的请求,不考虑参数的变化时,可以使用fiddler进行简单的性能测试.(使用功能为:replay) 一.replay功能调用 (1.Reissue Requests: ...
- 5G调研与总结
5G的重点是: 将极大地超越现有的4G,主要包括速度,时延,带宽,能耗等方面 传输速度的快速提高(相对于4G来说提升了近10倍),在万物物联上的作用会更大 由于传速度快,让各种远程操控成为了可能(AR ...
- Maven-Eclipse使用maven创建HelloWorld Java项目,使用Junit-4.11的注解
1.针对前面创建的mavenTest项目,我们做一些修改,包括pom.xml.App.java.AppTest.java 说明:其中的scope属性,如果是test,表示该依赖只对测试有效,如果不声明 ...
- 一个 Java 字符串到底有多少个字符?
来源:http://dwz.win/jqd 依照Java的文档, Java中的字符内部是以UTF-16编码方式表示的,最小值是 \u0000 (0),最大值是\uffff(65535), 也就是一个字 ...
- BZOJ1185[HNOI2007] 最小矩形覆盖（旋转卡壳）
BZOJ1185[HNOI2007] 最小矩形覆盖 题面 给定一些点的坐标,要求求能够覆盖所有点的最小面积的矩形,输出所求矩形的面积和四个顶点的坐标 分析 首先可以先求凸包,因为覆盖了凸包上的顶点,凸 ...
- HDU 6649 Data Structure Problem（凸包+平衡树）
首先可以证明,点积最值的点对都是都是在凸包上,套用题解的证明:假设里两个点都不在凸包上, 考虑把一个点换成凸包上的点(不动的那个点), 不管你是要点积最大还是最小, 你都可以把那个不动的点跟原点拉一条 ...
- 键盘按键KeyCode大全
- A dreamstart的催促 （快速幂） B TRDD got lost again
A dreamstart的催促 链接:https://ac.nowcoder.com/acm/contest/322/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ ...
- AOP记录日志
1.自定义注解 @Target(ElementType.METHOD) //注解放置的目标位置,METHOD是可注解在方法级别上 @Retention(RetentionPolicy.RUNTIME) ...
- 阿里开源框架-JarsLink-【JAVA的模块化开发框架】
JarsLink (原名Titan) 是一个基于JAVA的模块化开发框架,它提供在运行时动态加载模块(一个JAR包).卸载模块和模块间调用的API. 需求背景 应用拆分的多或少都有问题.多则维护成本高 ...