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;
        .........完整代码请登录后点击上方下载按钮下载查看