适用范围：已开通旺铺CSS的B/C店，未开通旺铺CSS的店铺请点击文章后面的Demo后复制破解代码！

昨天0点时首页就要发布的，结果详情页与侧边还没有做完，于是推迟到中午发布。banner就一张图，想了很久不知道用什么效果，反正就是很苦逼。

看了看psd原文件，于是决定将banner进行分层。分完层后要进行组合弄点特效啥的了，想想以往用的效果，不是从左往右就是从右往左要么就是从下往上，反正 就是在方位上进行变化，旋转一直没用过。于是，一个逆天的想法出现了。鼠标滑过时，文字进行位移，最下面边排字会有心电图效果，左边小人进行旋转，背景也会更大角度的旋转，效果图如下：

/*炫酷旋转banner　 　艺灵设计*/
.ylsj-qp{position:absolute;left: 50%;width: 1920px;height: 100%;margin-left:-960px;text-align:center;}
.xkbanner{overflow:hidden;position:relative;height:614px;}
.xkbanner .bg3{position:relative;background:url(/d/file/div/2013-11-13/bg4.jpg);width:1920px;height:1842px;top:-614px;-webkit-transition:all .8s ease-out;transition:all .8s ease-out;}
.xkbanner span{position:absolute;display:inline-block;-webkit-transition:all .8s ease-out;transition:all .8s ease-out;}
/*文字部分开始*/
.xkbanner .z0{top:0;left:319px;width:440px;height:604px;z-index:10}
.xkbanner .z0 a img{border:0;}
.xkbanner .z0 img{float:left;}
.xkbanner .z1{top:65px;right:378px}
.xkbanner .z2{top:224px;right:376px}
.xkbanner .z3{top:289px;right:376px}
.xkbanner .z4{top:360px;right:358px}
.xkbanner .z5{top:479px;height:44px; position:absolute; width:100%}
.xkbanner .z5_1{right:553px}
.z5 .z6{top:0px;height:22px;overflow:hidden}
.z5 .z7{left:0;height:21px;border-bottom:1px solid #6c6b69;width:100%}
.z5 .z8{background:url(/d/file/div/2013-11-13/x2.gif) repeat-x;width:100%;height:100%;}
/*滑过特效*/
.xkbanner:hover .bg3{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.xkbanner:hover .z0{-webkit-transform:rotate(15deg);transform:rotate(15deg);}
.xkbanner .z2:hover,.xkbanner .z3:hover,.xkbanner .z4:hover{right:400px;}
.xkbanner .z5:hover .z5_1{-webkit-transform:scale(1.1);transform:scale(1.1)}
.z5:hover .z7,.z5 .z11{left:-100%}
.z5:hover .z9,.z5:hover .z11{left:0%}
.z5:hover .z10,.z5 .z9{left:100%}

<!--2013年马尔杜克家12号最新炫酷banner 复制开始-->
<div style="height:614px; overflow:hidden">
　<div class="ylsj-qp">
　　<div class="xkbanner">
　　  <div class="bg3"></div>
　　  <span class="z0"><a href="/code" target="_blank"><img src="/d/file/div/2013-11-13/r1.png" /><img src="/d/file/div/2013-11-13/r2.png" /></a></span>
　　  <span class="z1"><img src="/d/file/div/2013-11-13/z1.png" /></span>
　  　<span class="z2 "><img src="/d/file/div/2013-11-13/z2.png" /></span>
　　  <span class="z3 "><img src="/d/file/div/2013-11-13/z3.png" /></span>
　　  <span class="z4 "><img src="/d/file/div/2013-11-13/z4.png" /></span>
　　  <div class="z5">
　　    <span class="z5_1 "><img src="/d/file/div/2013-11-13/z5.png" /></span>
　　    <span class="z6" style="left:0;width:1037px;"><span class="z7 ">　</span><span class="z8 z9">　</span></span>
　　    <span class="z6" style="right:0;width:548px;"><span class="z7 z10">　</span><span class="z8 z11 ">　</span></span>
　　  </div>
　　</div>
　</div>
</div>
<!--end 2013年马尔杜克家12号最新炫酷banner-->

Demo演示点此下载：→→[淘宝特效]马尔杜克家12号最新炫酷banner.zip　

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

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