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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3946 天前的主题，其中的信息可能已经有所发展或是发生改变。

谁知道？

鼠标

一闪而过

划过

8 条回复 • 1970-01-01 08:00:00 +08:00

justfindu

2014-02-07 10:03:47 +08:00

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

2014-02-07 10:06:45 +08:00

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

justfindu

2014-02-07 10:08:53 +08:00

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

不会贴

justfindu

2014-02-07 10:09:03 +08:00

.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

2014-02-07 10:12:09 +08:00

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

justfindu

2014-02-07 10:36:49 +08:00

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

Chappako

2014-02-07 21:43:14 +08:00

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

o618

2014-02-08 08:54:42 +08:00

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