CSS教程给图片写一个玻璃划光效果

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=


转载请注明:http://www.aierlanlan.com/rzfs/3034.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了