帝王谷资源网 Design By www.wdxyy.com
文章标题为啥是“仿放大镜”?
因为我今天要说的,并不是像一般说的,鼠标移入时旁边弹出一个局部的大图,那很好写,也没多少技巧(用相对定位定位父元素(或说:原图),绝对定位定位局部大图(目的:让它处于原图旁边某位置),在旁边用css控制样式并用鼠标事件监听,,,当然,你也可以直接用jQuery中的接口——$(‘类名’).jqzoom({zoomwidth:xx; zoomheight: xx; zoomType:‘reverse’;})最后的Type定义了放大镜类型)
好了,言归正传,我今天要说的是 鼠标移入时图片在原位置放大 的动画!
没错,就是动画。(如下:从某网站抠图)
起初想到的是css3的 @keyframes属性 ,因为这个用的多一些嘛,
比如:你可以用 from…to 来指定样式——入场动画和出场动画
还比如:你可以通过transition实现( 今天重点 )
先知:CSS3属性transform——(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
例如:
元素正常宽度是 100px,鼠标经过时宽度变为 200px。
如果只设置宽度值,效果如下图:
看起来是不是很生硬。我们再看一下加上 transition 的效果:
看了两个效果的差别,就大概明白 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,仿放大镜,局部放大
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年07月05日
2024年07月05日
- 孙露《不让我的眼泪陪我过夜》HQCDII 限量版 [WAV+CUE][517M]
- dnf巴卡尔武器怎么融合
- 魔兽世界wlk最强职业是什么 wlk最吃香最强职业推荐
- dnf巴卡尼单人和多人区别
- 群星《大热唱片DSD》APE+CUE
- 草蜢2012《软硬草蜢》3CD[WAV+CUE整轨]
- 雨林唱片发烧大碟-陈果《明知故犯HQCD》[WAV+CUE]
- 群星.2024-狐妖小红娘月红篇电视剧原声带【恒星引力】【FLAC分轨】
- 许美静.1998-好美静【上华】【WAV+CUE】
- 谭咏麟.1996-独一无二【宝丽金】【WAV+CUE】
- dnf平民怎么弄宠物
- dnf弓箭手职业
- dnf强化基础精通适合哪些职业
- V.A中国管弦乐纪念名盘《乡之音》FLAC
- [雨果]赵鹏《赵鹏·LPCD45》LPCD45[WAV+CUE]