曾在网上看到当鼠标悬停时光泽一闪而过的这种效果。十分的简单,但非常的漂亮。在重新设计网站版面时,我就运用在我的logo上使用这种效果。
光泽用到的图片
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了,很简单,也很有趣。