<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
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.