当前位置:首页>网站建设>b2美化-导航菜单用户菜单毛玻璃特效

b2美化-导航菜单用户菜单毛玻璃特效

释放双眼,带上耳机,听听看~!

b2美化-导航菜单用户菜单毛玻璃特效
今天我为大家分享B2主题导航菜单用户菜单毛玻璃特效,非常漂亮,大家赶紧试试吧。
代码放入style.css样式文件

/*用户小菜单毛玻璃*/
.top-user-box-drop.show{
    visibility: visible;
    transform: perspective(1px) scale(1);
    transition-duration: 0s,0.2s,0.2s;
    background: inherit;
    backdrop-filter: blur(50px);
    opacity: 1;
}
.top-user-box-drop li a:hover{
    font-weight: 600;
     background: inherit;
     color:#FF0000;
}
.top-user-info-box{
    background: #f4faff;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background: inherit;
    backdrop-filter: blur(50px);
    opacity: 1;
}
.top-user-info-box .user-w-rw a span{
    font-size: 12px;
    color:#FF0000;
}
.top-user-info-box .user-w-gold a i{
    color:#FF0000;
}
.top-user-info-box .user-w-gold a{
    color:#FF0000;
    padding: 0;
    border: 0;
    display: inline-block;
    width: auto;
    font-size: 13px;
    display: flex;
    align-items: center;
}
.top-user-box-drop.jt::before,.top-user-box-drop.jt::after{
    right:28px;
    left:initial;
    border-bottom: 8px solid #F5F6F7;
    z-index: 2;
    top:-8px;
	background: inherit;
    backdrop-filter: blur(50px);
    opacity: 1;
}
/*导航毛玻璃*/
.top-style-blur {
    background: inherit;  
    backdrop-filter: blur(50px);
     opacity: 1;
    }
.sub-menu {
    background: inherit;  
    backdrop-filter: blur(50px);
    opacity: 1;
	}
欢迎访问秀主题博客,分享简单实用WP教程
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
网站建设

wordpress后台仪表盘添加自定义面板

2022-8-27 8:37:08

网站建设

根据评论者最后一次评论时间来决定是否显示评论者链接

2022-8-30 7:16:09

温馨提示:

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:971318156@qq.com,我们将第一时间处理!

2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。

3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明

1 条回复 A文章作者 M管理员
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索