好了,今天聊聊怎么做鼠标滑过图片的时候有反光闪光的效果,这个效果还是在逛京东的时候无意间发现的,大家看看下边的成品演示:不然说了半天还不知道要做啥效果可尴尬了,哦对了,这种情况叫做什么? “尬聊”
大家看到了吧,今天文章就是介绍这种效果怎么实现
- Ps:有一点html基础的人会很容易看明白,如果没有基础的人可能会看起来比较吃力。
先把代码贴出来吧:
<div><a href="javascript:;"><img src="aaa.jpg"></a></div>
上边这是html里边的代码,没多少,还是比较简单的 ,重点是后边的css代码 要仔细看和分析 参了很多css3的知识点
div{width:800px;height:600px;overflow:hidden;} /div宽度和高度 超出隐藏
上边就是css样式代码,鸡哥只是简单的写了个demo给大家演示一下,其实后边的反光样式代码也是鸡哥复制的,好久没写了忘完了,只能复制了,大家哪里不明白可以百度,把不明白的代码百度一下就明白了。
具体的思想理论就是给a标签上方加了一个透明层,通过定位压在a标签上,这个透明层就是上边代码中的before,当然也可以是其他随便一个标签,每个人习惯不一样,然后通过css3的鼠标经过过度样式让这个透明层从做向右滑动就实现了这种反光的效果。
好了具体方法已经给大家分享出来了,如果要用到自己的项目中还要有点html+css的基础的,不然寸步难行。
下边我把刚刚写的demo打包了一下,如果不太明白的小伙伴可以下载来仔细研究。