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>