本站导航菜单美化

加入子主题style.css

/*导航菜单美化开始*/
.top-menu ul li.depth-0 > a {
    font-size: 16px;
}

.bd-yewanshuimian,.shanshuo {
    background: linear-gradient(90deg,rgba(131,58,180,1) 0%,rgba(253,29,29,1) 33.3%,rgba(252,176,69,1) 66.6%,rgba(131,58,180,1) 100%);
    -webkit-background-clip: text;
    color: transparent !important;
    background-size: 300% 100%;
    animation: text 4s infinite linear
}
@keyframes text {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -150% 0
    }
}

.top-search-select {
    border-right: none
}

.widget-post:hover .b2-widget-post-title h2 {
    text-decoration: none
}

@media screen and (max-width: 1221px) {
    .sjyincang {
        display:none !important
    }
}

.b2-menu-3 .sub-menu-0 li {
    -webkit-transition: margin-left .8s;
    -moz-transition: margin-left .8s;
    -o-transition: margin-left .8s
}

.b2-menu-3 .sub-menu-0 li:hover {
    margin-left: 10px
}



.b2-menu-1 .sub-menu-0 li {
    -webkit-transition: margin-bottom .8s;
    -moz-transition: margin-bottom .8s;
    -o-transition: margin-bottom .8s
}

.b2-menu-1 .sub-menu-0 li a:hover {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg)
}

.b2-menu-3 .sub-menu-0 a {
    height: 30px
}

.b2-menu-3 .sub-menu-0 li ul li {
    background: #151617
}

.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 .5s;
    -webkit-transition: -webkit-transform .5s;
    -moz-transition: transform .5s
}

.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: -60px;
    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,#fff 0%,#f6f6f6 96.09%)
}

.b2-menu-3 a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    height: 1px;
    left: 5%;
    position: absolute;
    background: linear-gradient(225.08deg,#fff 20%,#262626 90.09%);
    transition: width .6s ease 0s,left .6s ease 0s;
    width: 0;
    border-radius: 12px
}

.b2-menu-3 a:hover:after {
    width: 100%;
    left: 0
}

.b2-menu-3 .sub-menu-0 li {
    height: 35px
}
/*导航菜单美化结束*/

外观-菜单导航标签设置

<span data-hover="商城">商城</span>
<span data-hover="加入VIP会员"><p class="shanshuo">加入VIP会员</p></span>

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

本站新年活动弹窗代码

2022-1-21 23:00:51

b2美化

本站所用404模板免费下载

2022-2-19 9:27:18

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ1811170520 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧