html图片闪光效果 CSS3实现一个效果酷炫的闪光特效代码

当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：

大体思想是，设计一个透明层我，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。

同时在i层使用cursor：pointer，如果不设置这个的话，需要等透明层动画之后才能看到

会更加清楚！

闪光图片 title>

.overimg {

位置：亲戚;

显示：块;

/ * overflow：hidden; * /

box-shadow：0 0 10px #FFF;

}

。光{

cursor：pointer;

位置：绝对

左：-180px;

顶部：0;

width：180px;

height：90px;

background-image：-moz-linear-gradient(0deg，rgba(255,255,255,0)，rgba(255,255,255,0.5)，rgba(255,255,255,0));

background-image：-webkit-linear-gradient(0deg，rgba(255,255,255,0)，rgba(255,255,255,0.5)，rgba(255,255,255,0));

变换：skewx(-25deg);

-o-transform：skewx(-25deg);

-moz变换：skewx(-25deg);

-webkit-transform：skewx(-25deg);

}

.overimg：hover .light {

左：180px;

-moz-transition：0.5s;

-o-transition：0.5s;

-webkit转换：0.5s;

过渡：0.5s;

}

style>

head>

i>

p>

body>

html>