仿京东 鼠标移上去 白条闪过特效

 1 <style><!--
 2 *{
 3         margin:0;
 4         padding:0;
 5     }
 6     .floor  a:before {
 7         content:"";
 8         position:absolute;
 9         width:80px;
10         height:500px;
11         top:0;
12         left:-150px;
13         overflow:hidden;
14         background:-moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
15         background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
16         background:-webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
17         background:-o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
18         -webkit-transform:skewX(-25deg);
19         -moz-transform:skewX(-25deg)
20     }
21     .floor  a:hover::before {
22         -webkit-transition:left 1s;
23         -moz-transition:left 1s;
24         transition:left 1s;
25         left:400px
26     }
27 --></style>
28 <div class="floor"><a href="#"> <img src="http://img12.360buyimg.com/da/jfs/t3412/138/199046939/23013/78c2b547/580437ffN4da30dd0.jpg" alt="" width="210" height="475" /> </a></div>