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标 ...
随机推荐
- axios 拦截以及 API简单配置（element）
在某些情况下,有时候会在接口请求的API中需要拿到存在浏览器中的COOKIE,调用的方式可以为: // 获取浏览器Cookie function getCookie(cname) { var name ...
- Vuex模块：不开启命名空间
模块不开启命名空间时,会共享全局命名空间. { state: { 模块1: "局部状态1", 模块2: "局部状态2" }, getters: { getter ...
- MYSQL5.5 linux 多实例
安装过程 cmake 安装参照上一篇 https://www.cnblogs.com/lixuchun/p/9240888.html 多实例采用 /data 目录作为mysql多实例的总的根目录,然后 ...
- Jboss JNDI ENC 数据源
结合最近两天在网上看的各种帖子,昨天自己实际试了下,下面以问题的方式,对自己之前的困惑做个回答. 首先说一下,要用到的几个文件. 1)Jboss数据源配置文件,这儿是oracle数据源,数据源后缀名必 ...
- Maven系列学习(三)Maven生命周期和插件
Maven生命周期和插件 Maven另外的两个核心概念就是生命周期和插件,Maven的生命周期都是抽象的,其实实际行为都是由插件来完成的,生命周期和插件两者协同工作 1.生命周期 Maven的生命周期 ...
- c3p0连接池快速入门
为什么要使用连接池,这些基本也不用说那么多 以下为快速入门案例 包目录结构 配置文件c3p0-config.xml <c3p0-config> <!-- 默认配置,如果没有指定自己的 ...
- [2019杭电多校第六场][hdu6635]Nonsense Time
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6635 题意是说一开始所有数都冻结,第i秒会解冻第ki个数,求每秒状态下的最长上上升子序列长度. 这种题 ...
- 小白学Python（11）——pyecharts，绘制饼图 Pie
Pie-基本示例 from example.commons import Faker from pyecharts import options as opts from pyecharts.char ...
- OtterTune源码解析
为了方便后面对ottertune进行魔(hu)改(gao),需要先搞清楚它的源码结构和pipeline OtterTune分为两大部分: server side: 包括一个MySQL数据库(用于存储调 ...
- python学习笔记(12):高级面向对象
一.__slots__和property 1.__slots__魔术函数动态的添加方法和属性 2.直接暴露属性的局限性 3.使用get/set方法 4.利用@property简化get/set方法 5 ...