扫码关注官方订阅号
请求大伙一个问题,就是小米官网首页http://www.mi.com/的智能硬件下的图片产品,当我鼠标移动到其图片就会有浮动凸出的效果,这个用什么技术实现的呢?css3吗?我查看其元素看不懂,求前辈们帮忙,谢谢了
小伙看你根骨奇佳,潜力无限,来学PHP伐。
hover的时候,加了个类,然后给这个添加box-shadow和transform。打开F12,看看就知道啦
孩纸,拿走不谢:plunker
顺便说下,就是css3的一些简单样式,主要是transition属性
transition
就是加了一个阴影,然后过渡,让你觉得突出来了,其实只是一层阴影而已。至于z-index:2和traslate3d删除这两个属性也没发现有什么影响,我猜是hack什么东西。
firefox下,右键-使用firebug查看元素,上下箭头移动到li标签这一层,右侧可以查看具体样式。
鼠标经过,p显示就可以了嘛,鼠标离开就隐藏,过渡效果的话可以用css也可以用jquery
就是css3的位移和阴影效果。但为什么不直接把translate3d和阴影效果写到伪类:hover里,反而在class里新增个类
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
hover的时候,加了个类,然后给这个添加box-shadow和transform。
打开F12,看看就知道啦
孩纸,拿走不谢:plunker
顺便说下,就是css3的一些简单样式,主要是
transition属性就是加了一个阴影,然后过渡,让你觉得突出来了,其实只是一层阴影而已。至于z-index:2和traslate3d删除这两个属性也没发现有什么影响,我猜是hack什么东西。
firefox下,右键-使用firebug查看元素,上下箭头移动到li标签这一层,右侧可以查看具体样式。
鼠标经过,p显示就可以了嘛,鼠标离开就隐藏,过渡效果的话可以用css也可以用jquery
就是css3的位移和阴影效果。
但为什么不直接把translate3d和阴影效果写到伪类:hover里,反而在class里新增个类