艺灵设计

全部文章
×
当前位置：首页 >> 淘宝经验>>c店导航特效(平面360度旋转)

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样式放什么地方，接下来附一张图说明。如下：

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

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

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

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

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

相关文章

淘宝店铺装修教程之5月淘宝视频免淘宝店铺装修教程之用两种方法获取淘宝店铺装修教程之学会此技能，6到阿里巴巴店铺装修教程之代码绕过系淘宝店铺装修教程之透明图片为什么淘宝详情页免费添加视频工具玩坏淘宝之破解类目限制实现淘宝PC淘宝缩略图轮播特效二淘宝马尔杜克家首屏轮播特效淘宝条形轮播特效

评论区

我要评论

近期更新

权限破解之一键复制某sdn上的代码块 浅聊某sdn是如何实现未登录时屏蔽复制的 bug复盘之如何优雅的实现表格跨页勾选 记一次APP内调起微信支付时首次成功唤醒，后面 记一次注销联通卡的吐血经历 2023年敬业福获取方法 bug复盘之除数为0会怎样？ Vite2项目优化之线上功能有异常，如何快速排查 bug复盘之Vite2项目在线上报错，修复后却意外发 工具分享之图片压缩

热门标签

微信小程序 小程序 用户体验 uni-app gulp教程 @vuecli3 vue.js 路由守卫 vuex vue项目实战 路由 自动化构建 破解 网站管理系统 ajax php二次开发 在线生成 京东装修 破解淘宝css权限 jquery插件制作 淘宝店铺装修教程 ie6 bug jquery特效 css3 注册插件 源码分享 悬浮代码 视频教程 全屏模板框架 footer-more-trigger 鼠标滑过特效 sn-simple-logo 淘宝店铺装修经验汇总 喜欢代码 弹出层 宝贝分享代码 购物车代码 登陆插件 宝贝收藏代码 详情页全屏 天猫关注带数字 导航特效 遮罩层特效 修改淘宝销量 flash动画 模块下10px问题 二级下拉菜单 轮播特效 京东店铺装修 插件下载 淘宝漏洞 鼠标跟随 隐藏的店招/模块 css3边框阴影 赚积分

点击排行

2016淘宝完全自定义css工具淘宝天猫2016最新css悬浮工具淘宝基础版店铺自由编辑页头页面工具淘宝基础版店铺自主授权工具淘宝基础版店铺真正去除页头10px工具2016淘宝天猫全屏全家桶工具淘宝基础版店铺自由编辑页尾工具为了抓包某app,我折腾了10天,原来他是这样防抓包的纯css实现超宽图片全屏居中（兼容淘宝店铺）css3边框阴影效果

站长推荐

在线生成软件帮助文档实现淘宝基础版详情页导航全屏背景的方法第二期:玩转淘宝店铺装修网站部分文章更新动态一览表淘宝天猫店铺装修问题与技巧性经验汇总淘宝Widget库中轮播特效从入门到精通曝淘宝网往期改销量多处漏洞淘宝卖家有无必要开通css纯css实现超宽图片全屏居中（兼容淘宝店铺）鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)
关于艺灵网站地图艺灵团队
Copyright © 2012 - 2022 艺灵设计, all rights reserved. 技术支持：艺灵设计 网站备案：豫ICP备13015019号
特别申明：本站内容仅供个人学习参考，不做其它用途。