7b2美化-鼠标悬停导航菜单翻转特效

7b2美化-鼠标悬停导航菜单翻转特效


注意:使用此代码阿里矢量图标会失效,能看懂的话自行修改。该代码适用一级导航

以下代码放入css样式

/* 导航菜单悬停滚动开始 */
.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%);
}
/* 导航菜单悬停滚动结束 */

以下代码放到你的菜单名称

<span class="hob" style="background-color:#fc3c2d"></span><span><span data-hover="自定义">自定义</span></span>

原文来自:小狐狸资源网

声明:本站部分文章来源于网络,如有危害到您的合法权益请联系客服

给TA打赏
共{{data.count}}人
人已打赏
7b2

7b2美化-首页添加五格幻灯片

2022-8-13 22:08:33

7b2

7b2美化-列表文章缩略图添加动态特效

2022-8-15 22:22:58

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索