V2EX › justfindu 的所有回复 › 第 193 页 / 共 222 页

V2EX = way to explore

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

For Existing Member Sign In

1 ... 189 190 191 192 193 194 195 196 197 198 ... 222

❮

❯

2014 年 2 月 7 日

回复了 o618 创建的主题 › 问与答 › 鼠标划过头像一闪而过的效果是怎么实现的？

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

2014 年 2 月 7 日

回复了 o618 创建的主题 › 问与答 › 鼠标划过头像一闪而过的效果是怎么实现的？

.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;
}

2014 年 2 月 7 日

回复了 o618 创建的主题 › 问与答 › 鼠标划过头像一闪而过的效果是怎么实现的？

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

不会贴

2014 年 2 月 7 日

回复了 o618 创建的主题 › 问与答 › 鼠标划过头像一闪而过的效果是怎么实现的？

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

2014 年 2 月 7 日

回复了 o618 创建的主题 › 问与答 › 鼠标划过头像一闪而过的效果是怎么实现的？

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了~

哦我是抄来的~

2014 年 2 月 7 日

回复了 coolicer 创建的主题 › 问与答 › 春节有多少人吃坏肚子的？

@coolicer 至少安心~ 才也不太一样哦

2014 年 2 月 7 日

回复了 Livid 创建的主题 › V2EX › 春节和网站流量

为什么1月21 暴涨了一倍多~ 真好奇~

2014 年 2 月 7 日

回复了 coolair 创建的主题 › 情感问题 › 昨天相亲完，我（男）挺喜欢的，想要继续联系？怎么开始？

一楼是团长么~ 如此用心- -

2014 年 2 月 7 日

回复了 coolicer 创建的主题 › 问与答 › 春节有多少人吃坏肚子的？

没有呀~ 因为基本上都是家宴~