7b2美化-鼠标悬停导航菜单翻转特效
注意:使用此代码阿里矢量图标会失效,能看懂的话自行修改。该代码适用一级导航
以下代码放入css样式
代码语言:javascript
复制
/* 导航菜单悬停滚动开始 */ .b2-menu-3 .sub-menu-0 a { padding: 6px 9px; } .top-menu ul li.depth-0>a { display: inline-block; text-decoration: none; overflow: hidden; } .top-menu ul li.depth-0>a:after { content: attr(data-hover); position: absolute; top: -30px; left: 0; transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } .top-menu ul li.depth-0 a span { display: inline-block; position: relative; transition: transform 500ms; -webkit-transition: -webkit-transform 500ms; -moz-transition: transform 500ms; }
.top-menu ul li.depth-0>a:hover span,
.top-menu ul li.depth-0>a:focus span {
transform: translateY(30px);
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
}
.top-menu ul li.depth-0 a span:before {
content: attr(data-hover);
position: absolute;
top: -90px;
left: 0;
transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.b2-menu-3 .sub-menu-0>li:hover>a, .b2-menu-3 .sub-menu-0 a:hover{
background: linear-gradient(225.08deg,#ffffff 0%,#f6f6f6 96.09%);
}
/* 导航菜单悬停滚动结束 */
以下代码放到你的菜单名称
代码语言:javascript
复制
<span class="hob" style="background-color:#fc3c2d"></span><span><span data-hover="自定义">自定义</span></span>
原文来自:小狐狸资源网
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。