适用范围：京东店铺。(淘宝店铺的话会过滤掉动画)

今天又忙了一天，各种苦逼！！！无力吐槽。。。。。。今天的文章还没有发布，趁这会儿在公司，发篇文章。如下图

特效说明：鼠标滑过下面几个链接时，产生抛光的效果下面再附上源码，需要的亲直接拷贝走。

.footer-more-trigger,.most-footer,.sn-simple-logo{position:absolute;left:auto;top:auto;width:auto;line-height:inherit;padding:0;border:0;}/*重置系统样式，清除边框、填充、背景等其它属性*/
/*抛光特效　 　艺灵设计*/
img{border:0}
.user-pgtx{}
.user-qp{position:absolute;left: 50%;width: 1920px;height: 100%;margin-left:-960px;text-align:center;}
.user-pgtx a,.user-pgtx span{display:inline-block;}
.user-pgtx .user-po_re{position:relative;width:990px;margin:0 auto;}
.user-pgtx .user-po_re a{position:relative;overflow:hidden;vertical-align:top;}
.user-pgtx .user-po_re a span{position:absolute;display:inline-block;}
.user-pgtx .user-po_re a span{position:absolute;display:inline-block;}
.user-pgtx a span{left:-100%;width:180px;height:68px;background:url(/d/file/css3/2013-11-08/xg4.png) no-repeat left center;}
.user-pgtx a:hover span{-webkit-animation:ans1 .4s ease-out 1;animation:ans1 .4s ease-out 1;}
@-webkit-keyframes ans1{
0%{-webkit-transform:translateX(0px);}
100%{-webkit-transform:translateX(400px);}
}
@-moz-keyframes ans1{
0%{-moz-transform:translateX(0px);}
100%{-moz-transform:translateX(400px);}
}
@-o-keyframes ans1{
0%{-o-transform:translateX(0px);}
100%{-o-transform:translateX(400px);}
}
@-ms-keyframes ans1{
0%{-ms-transform:translateX(0px);}
100%{-ms-transform:translateX(400px);}
}
@keyframes ans1{
0%{transform:translateX(0px);}
100%{transform:translateX(400px);}
}

Demo演示
<div class="user-pgtx" style="height:800px;">
<div class="user-qp">
<a href="/code" target="_blank"><img src="/d/file/css3/2013-11-08/卡迪森banner.jpg"></a>
<div class="user-qp" style="height:68px;top:569px;">
<div class="user-k990ts user-po_re">
<a href="/code/" target="_blank"><img src="/d/file/css3/2013-11-08/a1.png"><span >　</span></a>
<a href="/zxsc/" target="_blank"><img src="/d/file/css3/2013-11-08/a2.png"><span>　</span></a>
<a href="/div/" target="_blank"><img src="/d/file/css3/2013-11-08/a3.png"><span >　</span></a>
<a href="/" target="_blank"><img src="/d/file/css3/2013-11-08/a4.png"><span >　</span></a>
<a href="/" target="_blank"><img src="/d/file/css3/2013-11-08/a5.png"><span >　</span></a>
</div>
</div>
</div>
</div>

点此下载：→→[淘宝特效]卡迪森灯饰首页打光效果.zip　　　

店铺预览地址：http://kds.tmall.com/。由于店铺后来是其它美工装修的，原特效已被清除......

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2013-11-08/111.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。