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标 ...
随机推荐
- 您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应...的解决办法
您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应.……解决办法很简单:1.修改root@localhost权限的密码. 打开wamp的phpmyadmin,进入它的管理界 ...
- 【ABAP系列】SAP ABAP中将字符格式的金额转换为数值的函数
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP中将字符格式的金 ...
- day15生成器send方法，递归，匿名函数，max结合匿名工作原理，常用的内置函数
复习 ''' 1.带参装饰器 - 自定义 | wraps def wrap(info) def outer1(func): from functools import wraps @wraps(fun ...
- pandas 入门（2）
from pandas import Series, DataFrame, Index import numpy as np from numpy import nan as NA obj = Ser ...
- Windows 10更新后无法启动Dolby音频驱动程序
在电脑更新Windows 10 1903版本后,重启出现如下问题: 经查,这与驱动强制签名有关.解决方法如下: 打开"设置"->"更新与安全"->& ...
- SpringBoot(二) -- SpringBoot配置
一.配置文件 SpringBoot可以使用两种类型的配置文件(文件名固定): application.properties application.yml 配置文件的作用就是来修改SpringBoot ...
- cJSON使用笔记
将cJSON用到STM32f103上 cJSON内存管理使用的是标准库stdlib.h的malloc()free()realloc()动态内存管理函数,我STM32F103使用的是正点原子的mallo ...
- 自动生成脚本头部格式并调用VIM工具
在我们写脚本的时候,开始总要按照脚本书写规范来定义脚本头部格式,久而久之是不是会觉得麻烦效率低下呢,这里就介绍一个好的思路给大家. 1 首先我们在VIM里先复制个头部格式的内容,这里就抄袭一个二师兄的 ...
- VBA中Let与Set的区别
Let与Set的区别 1.在“类模块”中 Property Let 语句 在Class块中,是给普通变量进行赋值操作的Property,该种Property将不能在其前面使用Set,因而将不能用户对对 ...
- Java Collection总结
继续啊啊啊啊啊啊 7. collection基本用法 Collection: add(obj) remove(obj) size() isEmpty() contains(obj) iterator( ...