用css实现光泽一闪而过的图片效果

曾在网上看到当鼠标悬停时光泽一闪而过的这种效果。十分的简单，但非常的漂亮。在重新设计网站版面时，我就运用在我的logo上使用这种效果。

光泽用到的图片

shine.png

HTML代码

总是最简单的。

<a href="#" class="logo"><span></span></a>

CSS代码

a标签的样式也比较很简单，溢出的部分隐藏，保证光泽的正常显示，然后设置元素的长宽：

a.logo {display: block;height: 90px;width: 240px;background: url("logo.jpg") 0 0 no-repeat;overflow: hidden;}

光泽部分的span标签

a.logo span {display: block;background: url("shine.png") -60px -80px no-repeat;transition-property: all;transition-duration: .8s;height: 90px;width: 240px;}

鼠标悬停时的动作：

a.logo:hover span {background-position: 100px 100px;}

要让光泽闪过的地方不方方正正那么死板，于是给它加个圆角样式：

a.logo span {border-radius: 80%;}

值可以是像素或者百分比，看自己需求。

这样就ok了，很简单，也很有趣。