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 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
PHP生成静态页面详解
2006/12/05 PHP
PHP 组件化编程技巧
2009/06/06 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
用python实现对比两张图片的不同
2018/02/05 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
python绘制直方图和密度图的实例
2019/07/08 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python实现简易学生信息管理系统
2020/04/05 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
小学体育教学反思
2014/01/31 职场文书
会计工作检讨书
2015/02/19 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python
Python进行区间取值案例讲解
2021/08/02 Python
Golang jwt身份认证
2022/04/20 Golang