艺灵设计

全部文章
×

c店导航特效(平面360度旋转)

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-12-12 14:47:20 - 阅: - 评:0 - 积分:0

适用范围:优先选择未付费C店,只需要复制样式即可,html模块内容是原导航里面可以添加的选项。 注:付费一词仅指开通旺铺CSS样式。文章于2014.09.20 22:50时更新过

昨天抽空捣鼓了下c店的导航,发现不能自定义,就算是把原导航复制一遍进去也是属性清除。苦逼了。那个滑过位移的还在研究中,先放一个平面360度旋转的效果吧。

css样式:

  1. /*系统样式无需复制*/
  2. .menu-list {width:882px;height:24px;overflow:hidden;float:left;}
  3. .menu-list .menu{float:left;}
  4. .tshop-pbsm-shop-nav-ch .menu-list .link{font-weight:normal;display:block;height:24px;line-height:24px;color:#000;font-size:12px;float:left;background:none;border-right:none;border-top:none;padding:0 20px;}
  5. .tshop-pbsm-shop-nav-ch .skin-box-bd a {color:#FFFFFF;font-weight:normal;}
  6. .tshop-pbsm-shop-nav-ch .skin-box-bd a {color:#303030;}
  7. .tshop-pbsm-shop-nav-ch .menu-list .menu .link .title {color:#FFFFFF;}
  8. .tshop-pbsm-shop-nav-ch .menu-list .link .title {display:block;float:left;}
  9. .tshop-pbsm-shop-nav-ch .menu-list .menu-hover .link {background:no-repeat right center #C0C0C0;}
  10. .tshop-pbsm-shop-nav-ch .menu-list .menu-hover .link {background:#f5f8fc url(http://img03.taobaocdn.com/tps/i3/T1vEi4XnhyXXXm0Pva-454-340.png) 0 -34px no-repeat;}
  11. .tshop-pbsm-shop-nav-ch .skin-box-bd a:hover {color:#FFFFFF;}
  12. .tshop-pbsm-shop-nav-ch .skin-box-bd, .tshop-pbsm-shop-nav-ch .all-cats .link, .tshop-pbsm-shop-nav-ch .menu-list .link {border:none;}
  13. /* 导航条背景色*/
  14. .skin-box-bd .menu-list {background:none repeat scroll 0 0 #00ad08;}
  15. /*首页/店铺动态背景色*/
  16. .skin-box-bd .menu-list .link {background: none repeat scroll 0 0 #00ad08;}
  17. /*首页/店铺动态右边线*/
  18. .skin-box-bd .menu-list .menu {border-right: 1px #006205 solid;}
  19. /*首页/店铺动态文字颜色*/
  20. .skin-box-bd .menu-list .menu .title {color: #ff0000}
  21. /*所有分类背景色*/
  22. .all-cats .link {background: none repeat scroll 0 0 #00ad08;}
  23. /*所有分类右边线*/
  24. .all-cats .link {border-right: 1px #006205 solid;}
  25. /*所有分类文字颜色*/
  26. .skin-box-bd .all-cats .title {color: #ff0000}
  27. /*平面360度旋转效果*/
  28. .menu-list .menu:hover a {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform: rotate(360deg);transform:rotate(360deg);}
  29. .menu-list .menu a {position:relative;-webkit-transition: .5s ease-out;-moz-transition: .5s ease-out;-o-transition: .5s ease-out;-ms-transition: .5s ease-out;transition: .5s ease-out}

模块内容:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>c店导航特效(平面360度旋转)----艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
  7. <meta name="keywords" content="c店导航特效,鼠标没过旋转效果,css3旋转rotate,B/C店装修,淘宝店铺装修,炫酷特效源码">
  8. <link rel="stylesheet" href="http://a.tbcdn.cn/apps/pamirsshop/wiki/stylesheets/base-min.css"/>
  9. <link href="http://a.tbcdn.cn/apps/pamirsshop/wiki/stylesheets/prettify.css" rel="stylesheet" type="text/css"/>
  10. <link rel="stylesheet" href="http://a.tbcdn.cn/apps/pamirsshop/wiki/stylesheets/wiki.css"/>
  11. <script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/prettify.js" type="text/javascript"></script>
  12. <script src="http://a.tbcdn.cn/s/kissy/1.1.6/seed-min.js"></script>
  13. <script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/jquery-min-1.4.js"></script>
  14. <script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/wiki.js"></script>
  15. <!--以上内容无须复制-->
  16. <!--c店导航特效(平面360度旋转)样式表-->
  17. <link type="text/css" rel="stylesheet" href="/d/file/code/taobao.css"/>
  18. </head>
  19. <body>
  20. <div class="skin-box tb-module tshop-pbsm tshop-pbsm-shop-nav-ch" style="display: block; visibility: visible;">
  21. <div class="skin-box-bd">
  22. <ul class="menu-list">
  23. <li class="menu"><a class="link" href="http://jiupin.tmall.com/" ><span class="title">首页</span></a></li>
  24. <li class="menu"><a class="link" href="http://maerduke.tmall.com/" ><span class="title">掌柜的1212</span> </a></li>
  25. <li class="menu"><a class="link" href="/code" target="_blank" ><span class="title">微淘主页</span></a></li>
  26. <li class="menu"><a class="link " href="http://homebbq.taobao.com/" target="_blank" ><span class="title">烧烤炉子</span></a></li>
  27. <li class="menu"><a class="link " href="/code" target="_blank" ><span class="title">烧烤工具</span></a></li>
  28. <li class="menu"><a class="link " href="/code" target="_blank" ><span class="title">烧烤调料</span></a></li>
  29. <li class="menu"><a class="link " href="/code" target="_blank" ><span class="title">烧烤木炭</span></a></li>
  30. <li class="menu"><a class="link " href="/code" target="_blank" ><span class="title">烧烤餐具</span></a></li>
  31. <li class="menu"><a class="link " href="/code" target="_blank" ><span class="title">户外必备</span></a></li>
  32. <li class="menu"><a class="link " href="/code" target="_blank" ><span class="title">烧烤套餐</span></a></li>
  33. </ul>
  34. </div>
  35. </div>
  36. </body>
  37. </html>

点此下载→→【代码】c店导航特效(平面360度旋转).zip   

点击上面的“运行代码”后能看到效果,这个是模拟淘宝c店的。放入样式后,也会看到此效果。此时,有的亲可能会问上面的css样式放什么地方,接下来附一张图说明。如下:

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2013-12-12/127.html

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

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: c店导航特效 鼠标没过旋转效果 css3旋转rotate B/C店装修 淘宝店铺装修 炫酷特效源码

上一篇: 红包悬浮   下一篇: 淘宝店铺装修之多屏轮播特效

评论区