<div class="logo">
    <a href="http://www.haorooms.com"><img src="http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/banner03.jpg" /></a>
</div>
@keyframes aniBlink {
from {
margin-left:-440px
}
to {
    margin-left:500px
}
}
@-webkit-keyframes aniBlink {
from {
margin-left:-440px
}
to {
    margin-left:500px
}
}
.logo {
    position:relative;
    width:440px;
    height:160px;
    overflow:hidden;
}
.logo a {
    display:inline-block
}
.logo a:before {
    content:'';
    position:absolute;
    width:60px;
    height:160px;
    margin-top:0px;
    margin-left:-440px;
    overflow:hidden;
    z-index:6;
  overflow: hidden;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
}
.logo:hover a:before {
 -webkit-animation:aniBlink .8s ease-out forwards;
 -moz-animation:aniBlink .8s ease-out forwards;
 -o-animation:aniBlink .8s ease-out forwards;
 animation:aniBlink .8s ease-out forwards
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.