350分享-新旺铺CSS代码-导航分类翻滚效果_350淘宝装修模板平台|350模板官网

350分享-新旺铺CSS代码-导航分类翻滚效果

发表日期：2015-06-04 10:03 文章编辑：350模板官网小编浏览次数：

新旺铺专业版超级高级效果---导航分类鼠标经过翻滚效果，如图：

本代码是通过导航CSS实现的，模板样式注意选择红色的。

代码：

.skin-box-bd .menu-list{background:url(http://img02.taobaocdn.com/imgextra/i2/1916485983/T2zxO_XCXXXXXXXXXX_!!1916485983.jpg);}.skin-box-bd .link{background:url(http://img02.taobaocdn.com/imgextra/i2/1916485983/T2zxO_XCXXXXXXXXXX_!!1916485983.jpg);}.skin-box-bd{background:url(http://img02.taobaocdn.com/imgextra/i2/1916485983/T2zxO_XCXXXXXXXXXX_!!1916485983.jpg);}.skin-box-bd .menu-list .menu-selected .link .title{background:url(http://img02.taobaocdn.com/imgextra/i2/1916485983/T2zxO_XCXXXXXXXXXX_!!1916485983.jpg);}.skin-box-bd .all-cats .all-cats-trigger{margin:0px;padding:0px;background:none;}.skin-box-bd .all-cats .all-cats-trigger .link .title{display:none;}.skin-box-bd .all-cats .all-cats-trigger .link .popup-icon{display:none;}.all-cats{background:none;max-width:300px;_width:300px;}.menu-list{background:none;width:700px;}.skin-box-bd .all-cats .all-cats-trigger .link{width:190px;margin:0px;padding:0px;border:none;display:block;background:no-repeat url(http://img01.taobaocdn.com/imgextra/i1/1916485983/T29L1.XrlXXXXXXXXX_!!1916485983.jpg);}.skin-box-bd .all-cats .all-cats-trigger .link:hover{background-position:0px -30px;}.menu-list .menu a{position:relative;-webkit-transition:0.5s ease-out;-moz-transition:0.5s ease-out;-o-transition:0.5s ease-out;transition:0.5s ease-out;}.menu-list .menu:hover a{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}.all-cats-popup{width:186px;height:auto;margin:0px;padding:0px;background:#FFFFFF;border-color:#C20404;}.all-cats-popup .popup-inner{width:190px;height:auto;margin:0px;padding:0px;}.all-cats-popup .popup-inner .cats-tree{width:190px;height:auto;margin:0px;padding:0px;display:block;opacity:0.9;}.all-cats-popup .popup-inner .cats-tree .fst-cat .fst-cat-hd .fst-cat-name{width:176px;height:30px;margin:0px 0px 0px 10px;padding:0px;display:block;float:left;line-height:30px;font-family:"微软雅黑";font-size:13px;color:#C20404;}.all-cats-popup .popup-inner .cats-tree .fst-cat .fst-cat-hd{width:188px;height:30px;margin:0px;padding:0px;display:block;background:none;}.all-cats-popup .popup-inner .cats-tree .fst-cat{width:186px;}.all-cats-popup .popup-inner .cats-tree .fst-cat .fst-cat-hd:hover{background:#C20404;}.all-cats-popup .popup-inner .cats-tree .fst-cat .fst-cat-hd:hover .fst-cat-name{color:#FFFFFF;}.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop{width:190px;height:auto;margin:0px;padding:0px;}.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner{width:190px;height:auto;margin:0px;padding:0px;border:2px solid #C20404;opacity:0.9;}.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd{width:190px;height:auto;margin:0px;padding:0px;display:block;}.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat{width:190px;height:auto;margin:0px;padding:0px;display:block;}.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd{width:190px;height:30px;margin:0px;padding:0px;display:block;background:#C20404;}.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd:hover{background:#FFFFFF;}.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd:hover .snd-cat-name{color:#000000;}