分享一个代码,淘宝专业版店铺装修950css鼠标经过图片旋转180度特效代码教程,注意是专业版旺铺的喔!基础版以后会公布,敬请期待!

先说一下使用方法:把代码中的图片和图片连接地址换成自己的,图片先在PS里做好,图片尺寸是:300*300的  整体高度:950*300,替换之后 ,复制代码粘贴到店铺装修中心,右侧950自定义代码内!发布之后 就可以了!

图片效果图:

鼠标经过图片旋转180度

下面是代码内容 :(注意预览代码可能看不了动态效果,需要把代码放进淘宝装修中心 发布之后 才可以喔!)

<div class="www-feimayi-net " style="height:290px;" data-title="【鼠标滑过图片旋转180度】(破解版)"><div class="footer-more-trigger most-footer cloud-footer" style="width:0;height:inherit;left:50%;top:auto;border:0;padding:0;background-color:transparent;position:absolute;display:block;overflow:visible;"><div class="footer-more-trigger most-footer cloud-footer  " style="width:920px;height:inherit;left:-460px;top:-10px;border:0px none;padding:0px;background-color:transparent;position:absolute;display:block;"><div data-maketime="2015/11/21 下午3:47:26" data-source="飞蚂蚁设计:www.feimayi.net" class="J_TWidget clearfix" style="margin:0 auto;width:920px;height:300px;position:relative;overflow:hidden;background:url(http://img02.taobaocdn.com/imgextra/i2/759415648/TB2rm7qaXXXXXa6XpXXXXXXXXXX_!!759415648.png) repeat;"><div class="footer-more footer-more-trigger most-footer cloud-footer  " style="width:300px;height:300px;padding:0;border:0;float:none;position:absolute;left:0;top:0;background-color:transparent;overflow:hidden;z-index:10;display:block;"><div class="footer-more-trigger footer-more-trigger most-footer cloud-footer" style="width:100%;height:100%;border:0;padding:0;position:static;left:0;top:0;background-color:transparent;overflow:hidden;display:block;"><a class="arrow-d" style="width:300px;height:1000px;display:block;padding:0px;border:0px none;text-decoration:none;background-image:url(&quot;http://img03.taobaocdn.com/imgextra/i3/759415648/TB2IIHDbXXXXXaAXpXXXXXXXXXX_!!759415648.gif&quot;);background-repeat:no-repeat;background-color:transparent;left:0px;top:0px;transition:all 0.4s ease-out 0s;">&nbsp;</a></div></div><div class="footer-more footer-more-trigger most-footer cloud-footer  " style="width:300px;height:300px;padding:0;border:0;float:none;position:absolute;left:310px;top:0;background-color:transparent;overflow:hidden;z-index:10;display:block;"><div class="footer-more-trigger footer-more-trigger most-footer cloud-footer" style="width:100%;height:100%;border:0;padding:0;position:static;left:0;top:0;background-color:transparent;overflow:hidden;display:block;"><a class="arrow-d" style="width:300px;height:1000px;display:block;padding:0px;border:0px none;text-decoration:none;background-image:url(&quot;http://img02.taobaocdn.com/imgextra/i2/759415648/TB2i0jGbXXXXXaLXXXXXXXXXXXX_!!759415648.png&quot;);background-repeat:no-repeat;background-color:transparent;left:0px;top:0px;transition:all 0.4s ease-out 0s;">&nbsp;</a></div></div><div class="footer-more footer-more-trigger most-footer cloud-footer  " style="width:300px;height:300px;padding:0;border:0;float:none;position:absolute;left:620px;top:0;background-color:transparent;overflow:hidden;z-index:10;display:block;"><div class="footer-more-trigger footer-more-trigger most-footer cloud-footer" style="width:100%;height:100%;border:0;padding:0;position:static;left:0;top:0;background-color:transparent;overflow:hidden;display:block;"><a class="arrow-d" style="width:300px;height:1000px;display:block;padding:0px;border:0px none;text-decoration:none;background-image:url(&quot;http://img04.taobaocdn.com/imgextra/i4/759415648/TB2t.LGbXXXXXawXXXXXXXXXXXX_!!759415648.png&quot;);background-repeat:no-repeat;background-color:transparent;left:0px;top:0px;transition:all 0.4s ease-out 0s;">&nbsp;</a></div></div><div class="ylsj-clear" style="clear:both;font-size:0;height:0;overflow:hidden;">清除浮动,B/C店通用。飞蚂蚁设计:www.feimayi.net</div></div></div></div></div>