这是CSS3效果,不适用于IE浏览器。
这个效果初次见到时还是非常炫酷的。用多了也就没什么了。本站在首页幻灯片和评论者头像上都采用了这个效果。
首先设置一个平行四边形的白光层,这个白光层一般放在img标签下面,可以用html5标签<em></em>或者<i></i>来设置。下面以em标签为例。添加好白光层后就是加上CSS
首先是em标签本身的样式
#output li em{position: absolute;left: -350px;top:0;width:300px;height:240px;background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:skewx(-25deg);-o-transform:skewx(-25deg);-moz-transform:skewx(-25deg);-webkit-transform:skewx(-25deg);cursor: pointer;}
整句代码要改的地方不多,前面left左偏移是要有的,偏移多少看你图片的大小,width值基本上等于图片宽度的2/3,height值与图片高度相同。就这么多。见下图中的平行四边形,目前是鼠标未悬停的状态:
鼠标悬停图片
这时就用到hover伪类了,还是在em标签上的CSS:
#output li:hover em{left:480px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
悬停就只是控制left左偏移的值即可,从负到正,这个白光层就会从左到右划过。就好象一道白光划过,这让人感觉图片有镜面反光的效果。
到此基本就完了,不过有的时候你会发现这个白光层覆盖在了最上面,遮住了其他div,什么原因呢?这是因为你的img标签的父级div没有设置下面两个属性: 1、position:relative; 2、overflow:hidden; 。(有时不一定要两个属性都有)有了这两个属性,这个白光层就不会遮住其他div了。以上。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4195.html