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
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
h5封装下拉刷新
Aug 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
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
JS中数据结构之栈
2019/01/01 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
python executemany的使用及注意事项
2017/03/13 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Python实现简单的2048小游戏
2021/03/01 Python
与UNIX有关的几个名词
2015/09/17 面试题
品质主管的岗位职责
2013/12/04 职场文书
家长对小学生的评语
2014/01/28 职场文书
策划创业计划书
2014/02/06 职场文书
小学生开学感言
2014/02/28 职场文书
高中班级口号
2014/06/09 职场文书
2014年库房工作总结
2014/11/26 职场文书
乔迁之喜答谢词
2015/01/05 职场文书