特效导航菜单动画-html代码-BFW代码库

特效导航菜单动画

代码语言：html

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

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

    <title>  Fancy tab bar active animation</title>

    <style>
        .tabbar {
            --primary: #275EFE;
            --background: #fff;
            --icon-active: #fff;
            --x: 64px;
            width: 100%;
            margin: 0;
            padding: 0 16px;
            border-radius: 0 0 28px 28px;
            list-style: none;
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            background: var(--background);
        }
        .tabbar:before, .tabbar:after {
            content: '';
            position: absolute;
            left: 0;
            border-radius: 50%;
            -webkit-transform: translateX(var(--x));
            transform: translateX(var(--x));
        }
        .tabbar:before {
            width: 64px;
            height: 64px;
            margin-left: -32px;
            background: var(--primary);
            top: -16px;
            z-index: 1;
        }
        .tabbar:after {
            width: 84px;
            height: 84px;
            margin-left: -42px;
            background: rgba(255, 255, 255, 0.08);
            top: -26px;
        }
        .tabbar li a {
            display: block;
            padding: 24px 0;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: -webkit-transform .2s ease;
            transition: transform .2s ease;
            transition: transform .2s ease, -webkit-transform .2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .tabbar li a div {
            --y: 0;
            width: 32px;
            height: 32px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform: translateY(var(--y));
            transform: translateY(var(--y));
        }
        .tabbar li a div svg {
            display: block;
            width: 32px;
            height: 32px;
            fill: rgba(255, 255, 255, 0);
            stroke-width: 1px;
            stroke: var(--primary);
        }
        .tabbar li a div:before {
            --s-x: 1;
            --s-y: 1;
            content: '';
            display: block;
            position: absolute;
            z-index: 1;
            -webkit-transform: scaleX(var(--s-x)) scaleY(var(--s-y));
            transform: scaleX(var(--s-x)) scaleY(var(--s-y));
        }
        .tabbar li a.box div:before {
            --s-x: .75;
            left: 50%;
            margin-left: -1px;
            width: 2px;
            height: 12px;
            bottom: 4px;
            border-radius: 1px;
            background: var(--primary);
        }
        .tabbar li a.box div em {
            --s-x: 1;
            --s-y: 1;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
        }
        .tabbar li a.box div em:before, .tabbar li a.box div em:after {
            --r: 0deg;
            content: '';
            display: block;
            height: 2px;
            border-radius: 1px;
            width: 13px;
            background: var(--primary);
            position: absolute;
            bottom: -1px;
            -webkit-transform: rotateZ(var(--r)) translateY(1px) scaleY(0.75);
            transform: rotateZ(var(--r)) translateY(1px) scaleY(0.75);
        }
        .tabbar li a.box div em:before {
            --r: 30deg;
            right: -1px;
            -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
        }
        .tabbar li a.box div em:after {
            --r: -30deg;
            left: -1px;
            -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
        }
        .tabbar li a.home div:before {
            --s-x: .75;
            --s-y: .75;
            border: 2px solid var(--primary);
            border-bottom: 0;
            width: 12px;
            height: 17px;
            border-radius: 2px 2px 0 0;
            left: 50%;
            bottom: 1px;
            margin-left: -6px;
            -webkit-transform: scale(0.75);
            transform: scale(0.75);
        }
        .tabbar li a.calendar div:before {
            --s-y: .75;
            hei.........完整代码请登录后点击上方下载按钮下载查看