css实现tab选项卡式菜单导航条效果代码-html代码-BFW代码库

css实现tab选项卡式菜单导航条效果代码

代码语言：html

代码描述：css实现tab选项卡式菜单导航条效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
        *,*::before,*::after {
        margin:0;
        padding:0;
        box-sizing:border-box
    }
    :root {
        --background-color:#bbdefb;
        --blue-50:#e3f2fd;
        --blue-100:#bbdefb;
        --blue-A700:#2962ff;
        --green-50:#e8f5e9;
        --green-100:#c8e6c9;
        --green-A700:#00c853;
        --purple-50:#f3e5f5;
        --purple-100:#e1bee7;
        --purple-A700:#a0f;
        --orange-50:#fff3e0;
        --orange-100:#ffe0b2;
        --orange-A700:#ff6d00;
        --orange-700:#f57c00;
        --grey-900:#212121;
        --white:#fff;
        --round-button-active-color:#212121;
        --translate-main-slider:100%;
        --main-slider-color:#e3f2fd;
        --translate-filters-slider:0;
        --filters-container-height:3.8rem;
        --filters-wrapper-opacity:1
    }
    html {
        font-size:62.5%
    }
    html,body {
        height:100%
    }
    body {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        transition:background-color .4s ease-in-out;
        background-color:var(--background-color)
    }
    button {
        border:0;
        cursor:pointer;
        background-color:transparent;
        outline:0
    }
    nav.amazing-tabs {
        background-color:var(--white);
        border-radius:2.5rem;
        user-select:none;
        padding-top:1rem
    }
    .main-tabs-container {
        padding:0 1rem 1rem 1rem
    }
    .main-tabs-wrapper {
        position:relative
    }
    ul.main-tabs,ul.filter-tabs {
        list-style-type:none;
        display:flex
    }
    ul.main-tabs li {
        display:inline-flex;
        position:relative;
        padding:1.5rem;
        z-index:1
    }
    .avatar,.avatar img {
        height:4rem;
        width:4rem;
        border-radius:50%;
        pointer-events:none
    }
    .avatar img {
        object-fit:cover
    }
    .round-button {
        height:4.8rem;
        width:4.8rem;
        border-radius:50%;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        color:var(--grey-900);
        transition:color .2s ease-in-out
    }
    .round-button:hover,.round-button.active {
        color:var(--round-button-active-color)
    }
    .round-button svg {
        pointer-events:none;
        height:2.8rem;
        width:2.8rem;
        transform:translate(0,0)
    }
    .main-slider {
        pointer-events:none;
        position:absolute;
        top:0;
        left:0;
        padding:1.5rem;
        z-index:0;
        transition:transform .4s ease-in-out;
        transform:translateX(var(--translate-main-slider))
    }
    .main-slider-circle {
        height:4.8rem;
        width:4.8rem;
        border-radius:50%;
        transition:background-color .4s ease-in-out;
        background-color:var(--main-slider-color)
    }
    .animate-jello {
        animation:jello-horizontal .9s both
    }
    @keyframes jello-horizontal {
        0% {
        transform:scale3d(1,1,1)
    }
    30% {
        transform:scale3d(1.25,0.75,1)
    }
    40% {
        transform:scale3d(0.75,1.25,1)
    }
    50% {
        transform:scale3d(1.15,0.85,1)
    }
    65% {
        transform:scale3d(0.95,1.05,1)
    }
    75% {
        transform:scale3d(1.05,0.95,1)
    }
    100% {
        transform:scale3d(1,1,1)
    }
    }.filters-container {
        overflow:hidden;
        padding:0 3rem;
        transition:max-height .4s ease-in-out;
        max-height:var(--filters-container-height)
    }
    .filters-wrapper {
        position:relative;
        transition:opacity .2s ease-in-out;
        opacity:var(--filters-wrapper-opacity)
    }
    .filter-tabs {
        border-radius:1rem;
        padding:.3rem;
        overflow:hidden;
        background-color:var(--orange-50)
    }
    .filter-tabs li {
        position:relative;
        z-index:1;
        display:flex;
        flex:1 0 33.33%
    }
    .filter-button {
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:.8rem;
        flex-grow:1;
        height:3rem;
        padding:0 1.5rem;
        color:var(-.........完整代码请登录后点击上方下载按钮下载查看