javascript - 求前辈们帮忙一个前端问题,谢谢了
伊谢尔伦
伊谢尔伦 2017-04-11 10:37:17
[JavaScript讨论组]

请求大伙一个问题,就是小米官网首页http://www.mi.com/的智能硬件下的图片产品,当我鼠标移动到其图片就会有浮动凸出的效果,这个用什么技术实现的呢?css3吗?我查看其元素看不懂,求前辈们帮忙,谢谢了

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(6)
巴扎黑

hover的时候,加了个类,然后给这个添加box-shadow和transform。
打开F12,看看就知道啦

黄舟

孩纸,拿走不谢:plunker

顺便说下,就是css3的一些简单样式,主要是transition属性

高洛峰

就是加了一个阴影,然后过渡,让你觉得突出来了,其实只是一层阴影而已。至于z-index:2和traslate3d删除这两个属性也没发现有什么影响,我猜是hack什么东西。

巴扎黑

firefox下,右键-使用firebug查看元素,上下箭头移动到li标签这一层,右侧可以查看具体样式。

PHP中文网

鼠标经过,p显示就可以了嘛,鼠标离开就隐藏,过渡效果的话可以用css也可以用jquery

PHP中文网

就是css3的位移和阴影效果。
但为什么不直接把translate3d和阴影效果写到伪类:hover里,反而在class里新增个类

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号