css实现炫酷滑动导航条效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现炫酷滑动导航条效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        .tabbar {
      --active: #8C6FF0;
      --icon: #6C7486;
      --icon-b-active: #fff;
      --hover: #99A3BA;
      --dot: #23C4F8;
      --text: #6C7486;
      --background: #1C212E;
      --shadow: rgba(18, 22, 33, .2);
      border-radius: 6px;
      width: 270px;
      background: var(--background);
      padding: 0 4px;
      box-shadow: 0 4px 12px -1px var(--shadow);
      position: relative;
    }
    .tabbar ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      position: relative;
      z-index: 1;
    }
    .tabbar ul li {
      position: relative;
      flex-grow: 1;
    }
    .tabbar ul li a {
      --d: 1;
      cursor: pointer;
      display: table;
      position: relative;
      display: flex;
      z-index: 1;
      justify-content: center;
      align-items: center;
      height: 60px;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }
    .tabbar ul li a div,
    .tabbar ul li a span,
    .tabbar ul li a svg {
      width: 20px;
      height: 20px;
      display: block;
      -webkit-backface-visibility: hidden;
    }
    .tabbar ul li a div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -84%);
    }
    .tabbar ul li a div span {
      width: 20px;
      bottom: 0;
      left: 0;
      transform-origin: 50% 50%;
      position: absolute;
      overflow: hidden;
      z-index: 1;
      background: var(--background);
      transform: scale(0.94);
      transform-origin: 50% 100%;
      -webkit-animation: down 0.3s linear forwards;
              animation: down 0.3s linear forwards;
    }
    .tabbar ul li a div span svg {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .tabbar ul li a div span:first-child {
      height: 20px;
    }
    .tabbar ul li a div span:first-child svg {
      transition: fill 0.3s ease, stroke 0.3s ease;
      fill: var(--icon);
      stroke: var(--icon);
    }
    .tabbar ul li a div span:last-child {
      height: 0;
      z-index: 5;
      transition: height 0.25s ease;
    }
    .tabbar ul li a div span:last-child svg {
      fill: var(--active);
      stroke: var(--active);
    }
    .tabbar ul li a strong {
      font-size: 10px;
      font-weight: 600;
      margin-top: 28px;
      color: var(--text);
      transition: all 0.3s ease;
    }
    .tabbar ul li a:hover div span:first-child svg {
      fill: var(--hover);
      stroke: var(--hover);
    }
    .tabbar ul li.active a {
      z-index: 5;
    }
    .tabbar ul li.active a div span {
      -webkit-animation: high 0.35s linear forwards 0.05s;
              animation: high 0.35s linear forwards 0.05s;
    }
    .tabbar ul li.active a div span:first-child svg {
      fill: var(--icon-b-active);
      stroke: var(--icon-b-active);
    }
    .tabbar ul li.active a div span:last-child {
      height: 20px;
      transition: height 0.3s ease 0.25s;
    }
    .tabbar ul li.active a strong {
      opacity: 0;
      transform: scale(0.6);
    }
    .tabbar em {
      --offset: 0;
      border-radius: 50%;
      display: block;
      width: 6px;
      height: 6px;
      position: absolute;
      bottom: 13px;
      left: 4px;
      margin: 0 0 0 -3px;
      z-index: 4;
      transition: transform 0.4s ease;
      background: var(--dot);
      transform: translateX(var(--offset));
    }
    
    @-webkit-keyframes high {
      0% {
        transform: rotate(0deg) scale(0.94);
      }
      33% {
        transform: rotate(calc(var(--d) * 10deg));
      }
      66% {
        transform: rotate(calc(var(--d) * 10deg)) translateY(-1px);
      }
      100% {
        transform: rotate(0deg) scale(1) translateY(-1px);
      }
    }
    
    @keyframes high {
      0% {
        transform: rotate(0deg) scale(0.94);
      }
      33% {
        transform: rotate(calc(var(--d) * 10deg));
      }
      66% {
        transform: rotate(calc(var(--d) * 10deg)) translateY(-1px);
      }
      100% {
        transform: rotate(0deg) scale(1) translateY(-1px);
      }
    }
    @-webkit-keyframes down {
      0% {
        transform: rotate(0deg) scale(1) translateY(-1px);
      }
      33% {
        transform: rotate(calc(var(--d) * 10deg));
      }
      66% {
        transform: rotate(calc(var(--d) * 10deg)) translateY(0);
      }
      100% {
        transform: rotate(0deg) scale(0.94) translateY(0);
      }
    }
    @keyframes down {
      0% {
        transform: rotate(0deg) scale(1) translateY(-1px);
      }
      33% {
        transform: rotate(calc(var(--d) * 10deg));
      }
      66% {
        transform: rotate(calc(var(--d) * 10deg)) translateY(0);
      }
      100% {
        transform: rotate(0deg) scale(0.94) translateY(0);
      }
    }
    html {
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
    }
    
    * {
      box-sizing: inherit;
    }
    *:before, *:after {
      box-sizing: inherit;
    }
    
    body {
      min-height: 100vh;
      font-family: Roboto, Arial;
      color: #ADAFB6;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #CDD9ED;
    }
    body .dribbble {
      position: fixed;
      display: block;
      right: 20px;
      bottom: 20px;
    }
    body .dribbble img {
      display: block;
      height: 28px;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <nav class="tabbar">
        <ul>
            <li class="active">
                <a>
                    <div>
                        <span>
                        <svg>
                            <use xlink:href="#dashboardIcon">
                        </svg>
                    </span>
                        <span>
                        <svg>
                            <use xlink:href="#dashboardIconFilled">
                        </svg>
                    </span>
                    </div>
                    <strong>Home</strong>
                </a>
            </li>
            <li>
                <a>
                    <div>
                        <span>
                        <svg>
                            <use xlink:href="#cameraIcon">
                        </svg>
                    </span>
                        <span>
                        <svg>
                            <use xlink:href="#cameraIconFilled">
                        </svg>
                    </span>
                    </div>
                    <strong>Camera</strong>
                </a>
            </li>
            <li>
                <a>
                    <div>
                        <span>
                        <svg>
                            <use xlink:href="#filesIcon">
                        </svg>
                    </span>
                        <span>
                        <svg>
                            <use xlink:href="#filesIconFilled">
                        </svg>
                    </span>
                    </div>
                    <strong>Files</strong>
                </a>
            </li>
            <li>
                <a>
                    <div>
                        <span>
                        <svg>
                            <use xlink:href="#userIcon">
                        </svg>
                    </span>
                        <span>
                        <svg>
                            <use xlink:href="#userIconFilled">
                        </svg>
                    </span>
                    </div>
                    <strong&.........完整代码请登录后点击上方下载按钮下载查看