css3中仿放大镜效果的几种方式原理解析


Posted in HTML / CSS onDecember 03, 2020

文章标题为啥是“仿放大镜”?
因为我今天要说的,并不是像一般说的,鼠标移入时旁边弹出一个局部的大图,那很好写,也没多少技巧(用相对定位定位父元素(或说:原图),绝对定位定位局部大图(目的:让它处于原图旁边某位置),在旁边用css控制样式并用鼠标事件监听,,,当然,你也可以直接用jQuery中的接口——$(‘类名’).jqzoom({zoomwidth:xx; zoomheight: xx; zoomType:‘reverse’;})最后的Type定义了放大镜类型)

好了,言归正传,我今天要说的是 鼠标移入时图片在原位置放大 的动画!
没错,就是动画。(如下:从某网站抠图)

css3中仿放大镜效果的几种方式原理解析

起初想到的是css3的 @keyframes属性 ,因为这个用的多一些嘛,
比如:你可以用 from…to 来指定样式——入场动画和出场动画

还比如:你可以通过transition实现( 今天重点

先知:CSS3属性transform——(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

例如:
元素正常宽度是 100px,鼠标经过时宽度变为 200px。
如果只设置宽度值,效果如下图:

css3中仿放大镜效果的几种方式原理解析
 

看起来是不是很生硬。我们再看一下加上 transition 的效果:
 

css3中仿放大镜效果的几种方式原理解析
 

看了两个效果的差别,就大概明白 transition 属性的作用了吧。本例目标和宽度变化类似,只不过是换了一个最终效果。请继续往下看详细代码:

<div id="container">
  <img src="./little_boy.jpg" />
  <span>大家好呀!我是谁你猜?</span>
</div>
#container {
  margin: 200px;
  position: relative;
  width: 300px;
  height: 300px;
  background-color: greenyellow;
  transition: transform .5s ease-out;
}

#container img {
  width: 100%;
  height: 100%;
}

#container span {
  position: absolute;
  top: 0;
  left: 0;
  margin: 6px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 18px;
  color: white;
  text-align: center;
}

#container:hover {
  transform: scale(1.3);
}

解析:
(1)添加容器的 hover 伪类,通过 transform 属性设置容器放大效果
(2)设置容器的 transition 属性,属性值为 transform 以及其动画时长

到此这篇关于css3中仿放大镜效果的几种方式原理解析的文章就介绍到这了,更多相关css3仿放大镜内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 #HTML / CSS
CSS3 实现时间轴动画
Nov 25 #HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 #HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 #HTML / CSS
CSS3 实现倒计时效果
Nov 25 #HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 #HTML / CSS
You might like
最省空间的计数器
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
javascript FormatNumber函数实现方法
2008/12/30 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
python插入数据到列表的方法
2015/04/30 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
python中的闭包函数
2018/02/09 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Python self用法详解
2020/11/28 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
八年级语文教学反思
2014/02/11 职场文书
文化活动实施方案
2014/03/28 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
校园广播稿精选
2014/10/01 职场文书
送达通知书
2015/04/25 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏