css3光束_css3实现图片划过一束光闪过效果

.img {display:block;position:relative;width:800px;height:450px;margin:0auto;}

.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,.2)50%, rgba(255,255,255,0)100%);

background: -webkit-gradient(linear,lefttop,righttop, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));

background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);

background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);

-webkit-transform: skewX(-25deg);

-moz-transform: skewX(-25deg)

}

.img:hover:before {left:150%; transition:left1s ease0s; }