css改变鼠标图片大小,CSS实现鼠标经过图片上图片等比缩放效果(代码实例)
本篇文章给大家带来的内容是关于如何使用CSS实现鼠标经过图片上图片缩放(缓慢变化,有过渡效果,缩放的过程是有动画过渡的)效果,主要用到CSS transform属性,css3 transition属性,以下实现效果和具体的实现方法,希望对你有所帮助。
先来看下效果预览
代码解读
HTML部分的代码
定义容器大小,overflow: hidden;可以在子容器的大小超过父容器的时候,隐藏溢出的部分* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
ul li{
list-style: none;
}
.content{
width: 310px;
height: 420px;
padding: 5px;
border: 1px solid #000;
margin: 10px auto;
}
/*定义容器的大小*/
.content ul li{
display: block;
width: 300px;
margin: 0 auto;
margin: 5px;
overflow: hidden;/*隐藏溢出*/
border: 1px solid #000;
}
定义图片的原始缩放比例transform: scale(1),。
图片缩放时的过度效果: transition: all 1s ease 0s;全部样式在1秒内缓动(逐渐变慢)的变化,除了ease(默认值)之外transition属性还有: linear(匀速),ease-in:(加速),ease-out:(减速),ease-in-out:(加速然后减速).content ul li img{
display: block;
border: 0;
width: 100%;
transform: scale(1);
transition: all 1s ease 0s;
-webkit-transform: scale(1);
-webkit-transform: all 1s ease 0s;
}
鼠标移动到图片时,图片的缩放效果:scale()里的值大于1,放大;scale()里的值小于1,缩小。/*图片放大*/
.content ul li:hover .amplify{
transform: scale(1.3);
transition: all 1s ease 0s;
-webkit-transform: scale(1.3);
-webkit-transform: all 1s ease 0s;
}
/*图片缩小*/
.content ul li:hover .narrow{
transform: scale(0.8);
transition: all 1s ease 0s;
-webkit-transform: scale(0.8);
-webkit-transform: all 1s ease 0s;
}
css改变鼠标图片大小,CSS实现鼠标经过图片上图片等比缩放效果(代码实例)相关推荐
- QLabel实现自适应图片大小(可鼠标右击全屏)
QLabel实现自适应图片大小(可鼠标右击全屏) 引言:首先说下走的弯路,按照固定思维QLabel外面套个QWidget,然后点击布局,让QLabel随着QWidget一起变化,理论上没啥问题,但是实 ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧 在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
- Linux批量改变图片大小,如何用Pix相册批量转换图片格式和调整大小
LinuxMint 是基于 Ubuntu LTS 的流行的 Linux 发行版,早年其主要是 在Ubuntu 的基础上换上自己的主题.图标等外观资源,各类软件.设置工具都与 Ubuntu 完全一致,因 ...
- div怎么在css中设置字体大小,css如何设置div字体大小
css设置div字体大小的方法是,给div字体添加font-size属性,并且设置合适的字体大小即可,例如[div {font-size:200%;}]. 本文操作环境:windows10系统.css ...
- css中首字大小,css如何设置字体大小
字体大小通过下面这段代码设置: font-size : 1em; font-size 翻译为中文是"字体尺寸",它的单位一般是px(像素)或em(字体高度). 中国的许多网站的默认 ...
- 上传图片时,图片大小不一,设置宽高,图片拉伸,如何处理呢,我来告诉你...
2019独角兽企业重金招聘Python工程师标准>>> 对于上传图片的烦恼,今天给你个例子,很实用的哦 这个是原来大小不一的图片 经过处理后 代码如下index.html <! ...
- markdown如何设置图片大小_cnblogs文章/MarkDown内如何调整图片的宽度?
前言 想发布已经写好的MarkDown文档,需要手动调整的地方只有图片.原因是默认插入的图片太大的话,图片会占满屏幕,导致浏览不便. 个人体验:常见的横屏情况下,一张图片不宜超过2/3屏幕高度,主体内 ...
- html幻灯片图片大小,如何制作ppt?如插入图片、调整图片大小与母版一致!
ppt转换视频,大家还是比较少用吧,有一款新颖的ppt转换器,就可以把ppt转换成任意一种流行格式的视频哦! ppt转换视频官方软件下载: 如何制作ppt(基本简单操作): 1.首先准备好要做成模版的 ...
最新文章
- Linux下运行run文件
- 【队列源码研究】消息队列beanstalkd源码详解
- pandas - 案例(股票分析)
- Lamp安装与实现动态网页案例(一)
- javaweb学习总结(十)——HttpServletRequest对象(一)(转)
- 【高并发解决方案】5、如何设计一个秒杀系统
- hfss和python接口_python 与HFSS联合仿真的教程讲解
- java saxreader 字符串_解析XML文件(字符串)的方法-----SAXReader
- DOS windows PE三者有什么区别
- 视频文件加密的方法浅析
- 使用 border 属性制作三角形
- LTE中阻塞干扰,杂散干扰,邻信道干扰,交调干扰,加性噪声干扰分析
- EXCEL的扩展名xls与xlsm有啥区别
- SQL 各种锁等待类型 wait type--sys.dm_os_wait_stats 表
- Todesk远程连接时一直显示密码错误
- 计算机购销存系统论文,企业进销存管理系统毕业论文.doc
- 通俗易懂、简单粗暴地解决各类猴子分桃问题
- Python 83道经典练习题,含答案!
- Java中汉字转拼音pinyin4j的用法
- div+css使用padding样式和 important标记实现Firefox和IE6处理带float样式的margi
热门文章
- 基于51单片机的超声波测距仪测液位及报警方案原理图设计
- 第一课:QT Quick项目架构说明
- 【论文相关】强化学习:提前看287篇ICLR-2021 深度强化学习领域论文得分汇总列表...
- [转]DTV(数字电视)扫盲-DVB介绍
- 图论(四)最短路算法Dantjig的实现
- Layui框架实现图片上传
- post和get方式在http请求中的区别
- linux存储群组名称的文件是,群组管理(分组,群组密码,身份切换,常见问题)- 系统管理 -Deepin深度系统用户手册...
- 聚美优品店庆nbsp;从天堂到地狱
- 通过BACnet物联网关实现楼宇自动化的物联网解决方案