使用CSS3线性渐变实现图片闪光划过效果
在百度音乐 http://music.baidu.com/ 看到这么一个图片效果，当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：
这个 CSS3 的效果怎么实现呢？
HTML 设计成这样：
1 |
<p class="overimg"> |
2 |
<a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a> |
3 |
<i class="light"></i> |
4 |
</p> |
CSS 为：
01 |
.overimg{ |
02 |
position: relative; |
03 |
display: block; |
04 |
/* overflow: hidden; */ |
05 |
box-shadow: 0 0 10px #FFF; |
06 |
} |
07 |
.light{ |
08 |
cursor:pointer; |
09 |
position: absolute; |
10 |
left: -180px; |
11 |
top: 0; |
12 |
width: 180px; |
13 |
height: 90px; |
14 |
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); |
15 |
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); |
16 |
transform: skewx(-25deg); |
17 |
-o-transform: skewx(-25deg); |
18 |
-moz-transform: skewx(-25deg); |
19 |
-webkit-transform: skewx(-25deg); |
20 |
21 |
} |
22 |
.overimg:hover .light{ |
23 |
left:180px; |
24 |
-moz-transition:0.5s; |
25 |
-o-transition:0.5s; |
26 |
-webkit-transition:0.5s; |
27 |
transition:0.5s; |
28 |
} |
大体思想是，设计一个透明层i，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。
同时在 i 层使用 cursor:pointer，如果不设置这个的话，需要等透明层动画之后才能看得到 pointer 指针。
打开 F12 调试来看会更加清楚。
