css3鼠标悬浮让图片出现闪光

< style >

#img{ width: 205px; height: 242px; margin: 50px auto; position: relative; overflow: hidden;}

#img:hover:before{ transition: left 0.7s; /*过渡,改变闪光的位置*/ left: 300px; }

#img:before{ /*插入闪光*/

content: '';

position: absolute;

width: 30px;

height: 277px;

top: 0;

left: -100px;

background-image: linear-gradient(to right, rgba( 255, 255, 255, 0.2) 0, rgba( 255, 255, 255, .5) 50%, rgba( 255, 255, 255, .2) 100%); /*linear-gradient渐变效果*/

transform: skewX( -25deg); /*沿x轴倾斜*/

}

< / style >

< div id= "img" style= "cursor: pointer;" >< img src= "../Images/12321.png" width= "205" height= "242" ></ div >