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动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
几种显示数据的方法的比较
2006/10/09 PHP
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python显示进度条的方法
2014/09/20 Python
python中文编码问题小结
2014/09/28 Python
Python单元测试实例详解
2018/05/25 Python
python 中xpath爬虫实例详解
2019/08/26 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
python同时遍历两个list用法说明
2020/05/02 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
2014春晚主持词
2014/03/25 职场文书
拓展策划方案
2014/06/03 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
mysql 子查询的使用
2022/04/28 MySQL