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标 ...
随机推荐
- Spring MVC 向页面传值-Map、Model和ModelMap https://www.cnblogs.com/caoyc/p/5635878.html
Spring MVC 向页面传值-Map.Model和ModelMap 除了使用ModelAndView方式外.还可以使用Map.Model和ModelMap来向前台页面创造 使用后面3种方式,都是在 ...
- 【ABAP系列】SAP ABAP的事件执行顺序
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP的事件执行顺序 ...
- 阅读笔记12-Java 面试题 —— 老田的蚂蚁金服面试经历
电话一面 1.自我介绍.自己做的项目和技术领域 2.项目中的监控:那个监控指标常见的哪些? 3.微服务涉及到的技术以及需要注意的问题有哪些? 4.注册中心你了解了哪些? 5.consul 的可靠性你了 ...
- Maven系列学习(三)Maven生命周期和插件
Maven生命周期和插件 Maven另外的两个核心概念就是生命周期和插件,Maven的生命周期都是抽象的,其实实际行为都是由插件来完成的,生命周期和插件两者协同工作 1.生命周期 Maven的生命周期 ...
- JavaScript 开发的 睡眠状况自测(SRSS)
Javascript 开发睡眠状况自测程序,手记!2019.11.13日... <script>//初始化fbox = new Findpair('fbox','output');fbox ...
- java jdk12，安装路径没有jre文件夹
(平台备注:win10系统,自测) 1.造成原因:JDK11之后没有直接的jre,要用户选择jre模块 2.如果需要,执行以下步骤可生成: 2.1 进入jdk安装目录下, 2.2 点击shift+右键 ...
- Collections与Arrays工具类
Collections工具类: 排序操作: void reverse(List list)//反转 void shuffle(List list)//随机排序 void sort(List list) ...
- SpringBoot官方文档学习（二）使用Spring Boot构建系统
强烈建议您选择一个支持依赖关系管理并且可以使用发布到“ Maven Central”仓库的构建系统.我们建议您选择Maven或Gradle.其他构建系统(例如,Ant)也可以和Spring Boot一 ...
- [2019杭电多校第二场][hdu6599]I Love Palindrome String(回文自动机&&hash)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6599 题目大意为求字符串S有多少个子串S[l,r]满足回文串的定义,并且S[l,(l+r)/2]也满足 ...
- WOJ#1243 蜥蜴 lizard
描述 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平面距离不超过d的任 ...