css3 - (效果) 鼠标放在图片上白光扫过效果

weixin_30794491

于 2017-11-29 15:48:00 发布

阅读量305

点赞数 1

原文链接：http://www.cnblogs.com/yangqi1209-com/p/7920900.html

版权

HTML:
<p class="overimg">
    <a><img src="raspberry.jpg"></a>
    <i class="light"></i>
</p>

CSS:
.overimg{
    position: relative; width:500px; height:335px;
}
.light{
    cursor:pointer;
    position: absolute;left: -500px;top: 0;
    width: 500px;height: 335px; 
    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    transform: skewx(-25deg);-o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
}
.overimg a img{ width:100%; height:100%;}
.overimg:hover .light{
    left:500px;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
}