CSS特效-一道闪光在图片上划过在百度音乐 http://music.baidu.com/ 看到这么一个图片效果，当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：大体思想是，设计一个透明层i，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。同时在 i 层使用 cursor:pointer，如果不设置这个的话，需要等透明层动画之后才能看得到 pointer 指针。打开 fireBUG 调试来看会更加清楚!
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>闪光图片</title><style>.overimg{position:relative;display:block;/*overflow:hidden;*/box-shadow:0010px#FFF;}.light{cursor:pointer;position:absolute;left:-180px;top: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));transform:skewx(-25deg);-o-transform:skewx(-25deg);-moz-transform:skewx(-25deg);-webkit-transform:skewx(-25deg);}.overimg:hover.light{left:180px;-moz-transition:0.5s;-o-transition:0.5s;-webkit-transition:0.5s;transition:0.5s;}</style></head><body><pclass="overimg"><a><imgsrc="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a><iclass="light"></i></p></body></html>