<div class="lightbox">
<div class="guangshu"></div>
</div>
.lightbox{
width:7rem;height:7rem;overflow:hidden;
}
/* 光影划过效果 */
.guangshu {
display: block;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.guangshu:before {
content:"";
position: absolute;
width:2.5rem;
height:100%;
top:0;
left:-50%;
overflow: hidden;
background: -moz-linear-gradient(left,
rgba(255, 255, 255, 0)25%,
rgba(255, 255, 255, .2)50%,
rgba(255, 255, 255, 0)75%);
background: -webkit-gradient(linear, left top, right top,
color-stop(25%, rgba(255, 255, 255, 0)),
color-stop(50%, rgba(255, 255, 255, .2)),
color-stop(75%, rgba(255, 255, 255, 0)));
background: -webkit-linear-gradient(left,
rgba(255, 255, 255, 0)25%,
rgba(255, 255, 255, .2)50%,
rgba(255, 255, 255, 0)75%);
background: -o-linear-gradient(left,
rgba(255, 255, 255, 0)25%,
rgba(255, 255, 255, .2)50%,
rgba(255, 255, 255, 0)75%);
transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg)
animation:tolight 1.5s infinite linear;
-webkit-animation:tolight 1.5s infinite linear;
}
/*光影划过动画*/
@keyframes tolight
{
from {left:-50%;}
to {left:100%;}
}
@-webkit-keyframes tolight
{
from {left:-50%;}
to {left:100%;}
}