首页 > 其他 > 详细

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

时间:2017-04-16 16:28:10      阅读:243      评论:0      收藏:0      [点我收藏+]

 

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

 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>

 

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

原文:http://www.cnblogs.com/jenn/p/6718917.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!