流体液体导航条特效-html代码-BFW代码库

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>
    <style>
        .tabbar {
            --primary: #275EFE;
            --background: #fff;
            --inactive: #99A3BA;
            --shadow: rgba(18, 22, 33, .24);
            --line: #CDD9ED;
            background: var(--background);
            box-shadow: 0 1px 4px -1px var(--shadow);
            border-radius: 5px 5px 21px 21px;
            width: 360px;
            -webkit-tap-highlight-color: transparent;
            overflow: hidden;
        }
        .tabbar ul {
            --x: 54px;
            margin: 0;
            padding: 0 12px;
            list-style: none;
            display: grid;
            position: relative;
            overflow: hidden;
            text-align: center;
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .tabbar ul:before {
            content: '';
            position: absolute;
            top: 0;
            left: var(--x);
            background: var(--primary);
            width: 60px;
            margin-left: -30px;
            height: 40px;
        }
        .tabbar ul li {
            position: relative;
        }
        .tabbar ul li:before, .tabbar ul li:after {
            content: '';
            background: var(--background);
            height: 44px;
            width: 84px;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -42px;
        }
        .tabbar ul li:before {
            border-radius: 0 48% 0 0;
        }
        .tabbar ul li:after {
            border-radius: 48% 0 0 0;
        }
        .tabbar ul li a {
            padding: 20px 0;
            display: block;
            text-decoration: none;
            position: relative;
            z-index: 1;
            color: var(--primary);
            transition: -webkit-transform .2s ease;
            transition: transform .2s ease;
            transition: transform .2s ease, -webkit-transform .2s ease;
        }
        .tabbar ul li a:active {
            -webkit-transform: scale(0.9);
            transform: scale(0.9);
        }
        .tabbar ul li a:before, .tabbar ul li a:after {
            content: '';
            top: 0;
            left: 50%;
            position: absolute;
            background: var(--primary);
            border-radius: 1px;
            width: 2px;
            margin-left: -1px;
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            -webkit-transform: translateY(-14px) scaleX(0.6);
            transform: translateY(-14px) scaleX(0.6);
        }
        .tabbar ul li a:before {
            height: 8px;
        }
        .tabbar ul li a:after {
            height: 4px;
        }
        .tabbar ul li a div {
            background: var(--inactive);
            width: 24px;
            height: 24px;
            margin: 0 auto 4px auto;
        }
        .tabbar ul li a div:before {
            --y: -100%;
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            -webkit-transform: translateY(var(--y));
            transform: translateY(var(--y));
            position: absolute;
            transition: -webkit-transform .4s linear;
            transition: transform .4s linear;
            transition: transform .4s linear, -webkit-transform .4s linear;
            background: var(--primary);
        }
        .tabbar ul li a span {
            display: block;
            font-weight: 500;
            font-size: 14px;
            opacity: 0;
            transition: opacity .36s linear;
        }
        .tabbar ul li.active:before {
            -webkit-animation: before  1.1s ease;
            animation: before  1.1s ease;
        }
        .tabbar ul li.active:after {
            -webkit-animation: after  1.1s ease;
            animation: after  1.1s ease;
        }
        .tabbar ul li.active a {
            -webkit-animation: bounce .9s linear .3s;
            animation: bounce .9s linear .3s;
        }
        .tabbar ul li.active a:before {
            -webkit-animation: drop .4s linear .1s forwards;
            animation: drop .4s linear .1s forwards;
        }
        .tabbar ul li.active a:after {
            -webkit-animation: drop .5s linear .13s forwards;
            animation: drop .5s linear .13s forwards;
        }
        .tabbar ul li.active a div:before {
            --y: 0;
            transition-delay: .3s;
        }
        .tabbar ul li.active a span {
            opacity: 1;
            transition-delay: .38s;
        }
        .tabbar ul li.calendar a div {
            -webkit-mask-box-image: url("https://aaroniker.me/feather-icons/calendar.svg");
            -webkit-mask: url("https://aaroniker.me/feather-icons/calendar.svg");
            mask: url("https://aaroniker.me/feather-icons/calendar.svg");
        }
        .tabbar ul li.files a div {
            -webkit-mask-box-image: url("https://aaroniker.me/feather-icons/file.svg");
            -webkit-mask: url("https://aaroniker.me/feathe.........完整代码请登录后点击上方下载按钮下载查看

流体液体导航条特效

网友评论0

js+css实现左侧伸缩导航菜单栏效果代码

gsap+svg实现菜单点击切换炫酷动画效果代码

gsap+svg实现炫酷古典菜单悬停动画效果代码

CustomEase+gsap实现炫酷弹出式导航菜单效果代码

div+css实现漂亮的垂直侧边栏可伸缩菜单效果代码

div+css实现底部横线菜单切换窗口效果代码

div+css实现横向鼠标悬停翻转文字导航菜单效果代码

react+use-web-animations实现横向和竖向图标菜单滑动效果代码

js+css实现滑动图标导航菜单效果代码

matter实现自由落体重力下落的导航菜单效果代码