介绍 & lt; p类=皁verimg"比;
& lt; a> https://www.yisu.com/zixun/& lt; img src=" http://www.php.cn/images/css3.jpg ">
<我类="光">
.overimg {
位置:相对;
显示:块;/*溢出:隐藏;*/不必:0 0 10 px # FFF;
}
较轻{
光标:指针;
位置:绝对的;
左:-180 px;
上图:0;
宽度:180 px;
身高:90 px;
背景图片:-moz-linear-gradient(0度,rgba (255255255 0), rgba (255255255, 0.5), rgba (255255255 0));
背景图片:-webkit-linear-gradient(0度,rgba (255255255 0), rgba (255255255, 0.5), rgba (255255255 0));
变换:skewx(-25度);
-o-transform: skewx(-25度);
-moz-transform: skewx(-25度);
-webkit-transform: skewx(-25度);
}
.overimg:徘徊较轻{
左:180 px;
-moz-transition: 0.5秒;
-o-transition: 0.5秒;
-webkit-transition: 0.5秒;
过渡:0.5秒;
}
这篇文章给大家分享的是有关使用CSS3线性渐变实现图片闪光划过效果的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
在百度音乐http://music.baidu.com/看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下:
这个CSS3的效果怎么实现呢?
HTML设计成这样:
CSS为:
大体思想是,设计一个透明层我skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变线性渐变,然后盘旋伪类的时候,设置0.5年代的动画时间。
同时在我层使用CSS鼠标样式光标:指针,如果不设置这个的话,需要等透明层动画之后才能看得到指针指针。
感谢各位的阅读!关于使用CSS3线性渐变实现图片闪光划过效果的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
