css3实现鼠标移入图片划过一束光闪过效果

css3实现鼠标移入图片划过一束光闪过效果：

可以通过 https://littlehiuman.github.io/cssEffect/flashLightPic.html 查看效果。

https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~

 

html:

<a href="#" class="img">
  <img src="http://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/d53f8794a4c27d1e8ff07fe61fd5ad6eddc43839.jpg" width="800"/>
</a>

 

css:

.img {
  display: block;
  position: relative;
  width: 800px;
  height: 450px;
  margin: 0 auto;
}
.img:before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0;
  left: -150px;
  overflow: hidden;
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(50%, rgba(255, 255, 255, 0.2)),
    color-stop(100%, rgba(255, 255, 255, 0))
  );
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background: -o-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
}
.img:hover:before {
  left: 150%;
  transition: left 1s ease 0s;
}