css实现暗色聚光灯式导航条导航栏tab切换效果代码-html代码-BFW代码库

css实现暗色聚光灯式导航条导航栏tab切换效果代码

代码语言：html

代码描述：css实现暗色聚光灯式导航条导航栏tab切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>
<style>
.tabbar {
        --icon-active:#275EFE;
        --icon-inactive:#6C7486;
        --icon-hover:#99A3BA;
        --text:#E4ECFA;
        --circle:#E4ECFA;
        --background:#171C28;
        --shadow:rgba(18,22,33,.1);
        border-radius:0 0 12px 12px;
        background:var(--background);
        width:240px;
        height:64px;
        padding:0 12px;
        box-shadow:0 8px 16px var(--shadow);
}
.tabbar >div {
        display:flex;
        height:100%;
        position:relative;
}
.tabbar >div label {
        flex:0 0 33.33%;
        display:flex;
        justify-content:center;
        align-items:center;
        position:relative;
        cursor:pointer;
        z-index:1;
}
.tabbar >div label svg,.tabbar >div label span {
        display:block;
        -webkit-backface-visibility:hidden;
        transition:opacity 0.4s ease,color 0.4s ease,-webkit-transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12);
        transition:transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12),opacity 0.4s ease,color 0.4s ease;
        transition:transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12),opacity 0.4s ease,color 0.4s ease,-webkit-transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12);
        -webkit-transform:translateY(var(--y)) scale(var(--s));
        transform:translateY(var(--y)) scale(var(--s));
}
.tabbar >div label svg {
        --y:0;
        --s:.84;
        width:24px;
        height:24px;
        margin:auto;
        color:var(--icon-inactive);
        -webkit-transform-origin:50% 50%;
        transform-origin:50% 50%;
}
.tabbar >div label span {
        --y:-8px;
        --s:.92;
        font-size:10px;
        font-weight:500;
        position:absolute;
        left:0;
        right:0;
        text-align:center;
        bottom:0;
        opacity:0;
        color:var(--text);
        -webkit-transform-origin:50% 0;
        transform-origin:50% 0;
}
.tabbar >div label:hover svg {
        color:var(--icon-hover);
}
.tabbar >div label:active svg {
        --s:.76;
}
.tabbar >div input {
        display:none;
}
.tabbar >div input:nth-of-type(1):checked + label + input + label + input + label + span {
        --x:0.........完整代码请登录后点击上方下载按钮下载查看