文档章节

CSS实现鼠标悬停经过图片由中心点逐渐放大效果

ZYallers
 ZYallers
发布于 2017/07/20 12:46
字数 287
阅读 75
收藏 0

CSS实现鼠标悬停经过图片由中心点逐渐放大效果

前几天写了类似用JS实现的效果,但并不理想,后来发现一个网站也用了类似功能,由于它代码结构比较清晰,所以可以从中看出其实现的原理和作用的代码。不想之前在仿照腾讯科技数码首页类似功能的实现,一直看代码都看不懂,没办法毕竟人家是大网站。

知道了后才发现可以用CSS实现,就只需要简单的添加几个样式,可能做前端开发的会不屑于看我这样的菜鸟,但我不是只能这样一点点弄懂,呵呵。

#mainer-list > .panel > .panel-body > .element > a > img{width: 100%;opacity: 1;padding: 0;margin: 0;transform: scale(1);transition: transform 1s ease 0s;}
#mainer-list > .panel > .panel-body > .element > a > img:hover{opacity: 0.9;transform: scale(1.05);}

代码中起作用的是“transform: scale(1);transition: transform 1s ease 0s”和“transform: scale(1.05)”这两句,我就不多解释,俺也只懂些表皮,详细的可以问度娘。

© 著作权归作者所有

ZYallers
粉丝 1
博文 59
码字总数 19100
作品 0
佛山
程序员
私信 提问
好玩儿 的 javascript

非常平滑的JS图片滚动特效代码,无缝循环 http://www.codefans.net/jscss/code/255.shtml 强烈推荐的一款CSS导航菜单 http://www.codefans.net/jscss/code/768.shtml 纯CSS下拉菜单代码http:...

曦羽
2017/10/05
0
0
10 款免费的 jQuery 图像缩放插件

设计电子商务网站必知的十款免费 jQuery 图像缩放插件 Jquery 图像缩放插件不仅简单易用,而且还能够给予用户更好的体验。你只需要在图像或产品上移动鼠标,你将看到图片或产品的详细信息。 ...

oschina
2015/05/12
36.7K
9
减少jQuery依赖, CSS3实现鼠标悬停动效

     在网页中我们经常会在页面上鼠标悬停时看到一些动效,例如图片跟随鼠标点击放大、懒加载等,这个交互细节在各个主流网站中随处可见,能为网站增添个性亮点。      背景     ...

webstack前端栈
2017/11/29
0
0
CSS3 transition实现超酷动画效果

一、前面的感慨 以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等。但都是试试而已,知道有这么回事。今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了...

coko
2013/08/15
0
0
用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动...

鉴客
2010/08/12
7.5K
1

没有更多内容

加载失败,请刷新页面

加载更多

java 面试知识点笔记(十一)多线程与并发-原理 中篇

自适应自旋锁:(java6引入,jvm对锁的预测会越来越精准,jvm也会越来越聪明) 自选次数不再固定 由前一次在同一个锁上的自旋时间及锁拥有者的状态来决定(如果在同一个锁对象上自旋等待刚刚成...

断风格男丶
23分钟前
1
0
Rainbond 5.1.4发布,复杂微服务架构整体升级和回滚

Rainbond 5.1.4发布, 复杂微服务架构整体升级和回滚 今天为大家带来Rainbond 5.1系列第四个更新版本,本次版本更新的主要内容是复杂微服务架构应用整体升级和回滚,能实现复杂微服务架构的持...

好雨云帮
25分钟前
1
0
selenium Python定位元素和相关事件

场景 通过使用selenium python的API能够很好的定位html中的元素,并指挥鼠标进行点击。 定位元素 find_element_by_*方法 find_element_by_id(id_) : html标签中的id确定标签 find_element_b...

亚林瓜子
31分钟前
0
0
apache隐藏版本信息及设置网页缓存

实战:源码编译安装apache及调优技巧 实战环境: 生产环境中,部署了apache之后,我们应该从安全还是性能角度,在apache服务上线之前,对其做诸多的优化调试才行。 技巧1: 安装apache屏蔽a...

寰宇01
45分钟前
1
0
百度小程序第三方接入图片上传demo

代码是基于ThinkPHP 3.2的,其他语言请自行实现,PHP版本为5.6 /*** 图片上传* @Author Qianlong <87498106@qq.com>* @PersonSite http://dev.21ds.cn/*/ public function onlyUpl......

千龍
47分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部