css3 实现图片闪过一道光效果 亲测可用

html部分：

         <div class="icon_div">
                <img style="display: block; height: 180px; width: 100%;"
                    src="../../images/wydk/sfrz_bg.png">
                <img style="display: block;height: 27px;width: 199px;position: absolute;left: 4%;top: 3%;" src="" id="logo">    
            </div>

css部分：

.icon_div{
    position: relative;
    overflow: hidden;
}
.icon_div:before{
        position: absolute;
        left: -100%;                    /*改变left的值，让其相对box影藏*/
        top: 0;
        width: 30%;
        height: 100%;
        content: "";
        /* Safari 5.1 - 6.0 */
      background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
      /* Opera 11.1 - 12.0 */
      background: -o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
      /* Firefox 3.6 - 15 */
      background: -moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
      /* 标准的语法 */
      background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
      transform: skewX(-45deg);
    -webkit-animation: searchLights 8s  0s  ease infinite;
    -o-animation: searchLights 8s  0s ease infinite;
    animation: searchLights 8s  0s ease infinite;
}
@-webkit-keyframes searchLights {
70%{
    left:-150%;
}
80%{
    left: 90%; 
}
100% { 
    left: 150%;
 }
}