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选择器的研究(详解)
Sep 16 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP将XML转数组过程详解
2013/11/13 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
php实现头像上传预览功能
2017/04/27 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
Python实现CET查分的方法
2015/03/10 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
python之消除前缀重命名的方法
2018/10/21 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python实现汇率转换操作
2020/05/03 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
开业庆典邀请函
2014/01/08 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
难忘的一天教学反思
2014/04/30 职场文书
低碳环保标语
2014/06/12 职场文书
高三英语教学计划
2015/01/23 职场文书