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

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

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