用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了,很简单,也很有趣。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值