适用范围：已开通旺铺css的B/C店，未开通旺铺css的B/C店需要使用“破解淘宝css权限工具 ”

大家好，我是马尔杜克家的，今天来分享本店在今年双11期间，洒家做的最新特效，看图:

如图中所示，当洒家第一眼看到此psd效果图时，肯定是用遮罩层效果了。对于普通的遮罩层、淡入淡出、左右滑动也太没新意了，于是洒家想了又想看了又看，突然间想到一个新的特效。
特效分析：鼠标滑过时背景和文字从中间位置进行分割，鼠标离开时又恢复原位。
好了，来分享下源码。

.footer-more-trigger,.most-footer,.sn-simple-logo{position:absolute;left:auto;top:auto;width:auto;line-height:inherit;padding:0;border:0;}/*重置系统样式，清除边框、填充、背景等其它属性*/

然后再放这个鼠标滑过特效用到的css样式。

/*鼠标滑过炫酷特效　2013-11-06　 艺灵设计*/
.clearfix:after{content:"";clear:both;display:table;height:0;font-size:0;overflow:hidden}
.clearfix{*zoom:1;}
.ylsj-k881{width:881px;margin:0 auto; overflow: hidden;}
.ylsj-k881 a{display:inline-block; position:relative;float:left;overflow:hidden;text-align:center}
.ylsj-k881 a span{position:absolute;width:100%;height:50%;display:inline-block;background:url(/d/file/css3/2013-11-06/bg1.png) repeat;}
.ylsj-k881 a .gw_s,.gw_x{height:50%;left:0;}
.ylsj-k881 a .gw_s{top:0;}
.ylsj-k881 a .gw_x{top:50%;}
.ylsj-k881 a .gw_s img{margin:92px auto 0;}
.ylsj-k881 a .gw_x img{margin:0px auto;}
.ylsj-k881 a .gw_x{bottom:0;}
.ylsj-k881 a:hover .gw_s{top:-50%;}
.ylsj-k881 a:hover .gw_x{top:100%;}
.ylsj-mr20 a{margin-right:20px;}
.ylsj-mr20 .mr0{margin:0;}
.ylsj-k881 a.fr{float: right;}
img{border:0;}
.ylsj-gy_t{-webkit-transition:top .4s ease-out;transition:top .4s ease-out;}

最后再放特效的html源码。

Demo演示
<!--2013 马尔杜克家双11最新特效-->
<div class="ylsj-k881 clearfix">
<a href="/" target="_blank"><img class="fl" src="/d/file/css3/2013-11-06/新品首发.jpg"></a>
<a href="/code/2013-11-06/109.html" target="_blank" class="fr"><img src="/d/file/css3/2013-11-06/新品鞋子1.jpg"><span class="gw_s ylsj-gy_t"><img src="/d/file/css3/2013-11-06/pic1s.png" style="margin-top:186px;"></span><span class="gw_x ylsj-gy_t"><img src="/d/file/css3/2013-11-06/pic1x.png"></span></a>
</div>
<div class="ylsj-mr20 ylsj-k881 clearfix" style="margin-top:38px;">
<a href="/" target="_blank"><img src="/d/file/css3/2013-11-06/新品鞋子2.jpg"><span class="gw_s ylsj-gy_t"><img src="/d/file/css3/2013-11-06/pic2s.png"></span><span class="gw_x ylsj-gy_t"><img src="/d/file/css3/2013-11-06/pic2x.png"></span></a>
<a href="/" target="_blank"><img src="/d/file/css3/2013-11-06/新品鞋子3.jpg"><span class="gw_s ylsj-gy_t"><img src="/d/file/css3/2013-11-06/pic2s.png"></span><span class="gw_x ylsj-gy_t"><img src="/d/file/css3/2013-11-06/pic2x.png"></span></a>
<a class="mr0" href="#" target="_blank"><img src="/d/file/css3/2013-11-06/新品鞋子4.jpg"><span class="gw_s ylsj-gy_t"><img src="/d/file/css3/2013-11-06/pic2s.png"></span><span class="gw_x ylsj-gy_t"><img src="/d/file/css3/2013-11-06/pic2x.png"></span></a>
</div>

点此下载：→→[淘宝特效]马尔杜克家双11最新特效.zip (已将天猫代码和淘宝代码进行分开)　　　

一个好的创意总是要想好久，特别伤脑筋，而实现起来却是很简单的事情。需要的亲可以将源码拷贝到自己的店铺中，炫酷一下吧！

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

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