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标 ...
随机推荐
- 几个模拟OLE事件注册、调用的宏
最近遇到一个要求,将原来的OCX控件,替换成直接的DLL调用. 遇到OLE的事件回调,写了三个宏,用于简化代码 #define OLE_ENVENT_IN_CLASS_ONE(event_name, ...
- Rxjava2不能再发射Null了
RxJava2的最大改变就是不能再流里发射Null了,有人会问发射了就怎么了,答案是你的流会因为NPE断开. 例如下面这段代码因为文件被删了找不到返回null,这时候就不触发下面Consumer的ac ...
- vue猜数字游戏
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 简单DP入门（一） 数字三角形
数字三角形
- idea奇葩问题汇总
1.用idea在tomcat里运行普通的springMVC项目,用nacos做为配置中心,通过@NacosValue来读取配置中心的值,配置了autoRefreshed = true但是不起作用,读取 ...
- MVC Html.AntiForgeryToken(); 防止跨站伪造请求（建议所有表单提交都加这个）
视图页面from表单中添加 @Html.AntiForgeryToken(); 然后每个表单提交的时候都会带__RequestVerificationToken 字段 后端控制器验证时添加 [Val ...
- oracle--表类型
- python基础-6 正则表达式
一 python正则简介 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现. 正则表达式模式被编译成一系列的字 ...
- 3486 ( Interviewe )RMQ
Problem Description YaoYao has a company and he wants to employ m people recently. Since his company ...
- 使用jQuery实现Socket客户端
摘于抄书web前端开发 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...