hello小伙伴们,你们好啊,时隔多天,老墨吻又来开更新一期css的坑吧。
最近呢也是看了很多案例,这段时间呢,整理几个老墨吻比较喜欢的css分享一下吧。
这期呢,分享一个给图片加上一个类似于玻璃反光的效果吧。
先上个实例演示:
看个人喜好吧,可以加在网站logo上啥的。后续有时间还会改改代码,有需求可以私信站长。
下面放css代码跟调用代码:
css
.img{display:block;position:relative;margin:0auto;}.img:before{content:;position:absolute;width:px;height:%;top:0;left:-px;overflow:hidden;background:-moz-linear-gradient(left,rgba(,,,0)0,rgba(,,,.2)50%,rgba(,,,0)%);background:-webkit-gradient(linear,lefttop,righttop,color-stop(0%,rgba(,,,0)),color-stop(50%,rgba(,,,.2)),color-stop(%,rgba(,,,0)));background:-webkit-linear-gradient(left,rgba(,,,0)0,rgba(,,,.2)50%,rgba(,,,0)%);background:-o-linear-gradient(left,rgba(,,,0)0,rgba(,,,.2)50%,rgba(,,,0)%);-webkit-transform:skewX(-25deg);-moz-transform:skewX(-25deg)}.img:hover:before{left:%;transition:left1.5sease0s;}
html
divclass=imgimgsrc=