javascript - 求前辈们帮忙一个前端问题,谢谢了
伊谢尔伦
伊谢尔伦 2017-04-11 10:37:17
0
6
267

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

伊谢尔伦
伊谢尔伦

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

reply all (6)
巴扎黑

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

    黄舟

    孩纸,拿走不谢:plunker

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

      小葫芦

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

        巴扎黑

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

          洪涛

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

            Ty80

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

              Latest Downloads
              More>
              Web Effects
              Website Source Code
              Website Materials
              Front End Template
              About us Disclaimer Sitemap
              php.cn:Public welfare online PHP training,Help PHP learners grow quickly!