<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%;}}
