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动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 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
Laravel学习教程之本地化模块
2017/08/18 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
json跨域调用python的方法详解
2017/01/11 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python迭代dict的key和value的方法
2018/07/06 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python assert的用处示例详解
2019/04/01 Python
python实现大量图片重命名
2020/03/23 Python
python IDLE添加行号显示教程
2020/04/25 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
python交互模式基础知识点学习
2020/06/18 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
写给学生的新学期寄语
2014/01/18 职场文书
技校个人求职信范文
2014/01/25 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
三八妇女节寄语
2015/02/27 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL