鼠标划过头像一闪而过的效果是怎么实现的？

[o618]

谁知道？

[justfindu]

https://gist.github.com/RJustice/8856273

<div class="arc_img">
<a href="#">
<img src="test.png" alt="LEE图库">
</a>
<i class="light"></i>
</div>

skewx是在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变，然后hover的时候，设置0.2s的动画时间。

同时因为图像是有链接的，所以在透明层i标签使用了cursor:pointer，不然会等闪光划过之后，才能看见手指状。

当然了，CSS3 的效果嘛，IE低版本肯定不支持了。其实也可以做，这恐怕又得结合JS了~


哦 我是抄来的~

[justfindu]

https://gist.github.com/RJustice/8856273.js

[justfindu]

http://gist.github.com/RJustice/8856273.js

不会贴

[justfindu]

.arc_img{
width: 160px;
height: 160px;
position: relative;
display: block;
overflow: hidden;
margin:200px auto;
box-shadow: 0 0 10px #FFF;
}
.light{
cursor:pointer;
position: absolute;
left: -100px;
top: 0;
width: 160px;
height: 160px;
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);

}
.arc_img:hover .light{
left:120px;
-moz-transition:0.2s;
-o-transition:0.2s;
-webkit-transition:0.2s;
transition:0.2s;
}

[o618]

@justfindu 通过css实现的？不知道哪里能看到演示效果

[justfindu]

@o618 http://music.baidu.com/ 专辑那个效果么~ 这就是~

[Chappako]

@justfindu 网易音乐就没有专辑的概念好么

[o618]

楼上说的是百度音乐，谢谢