纯css用svg实现导航特效-html代码-BFW代码库

纯css用svg实现导航特效

代码语言：html

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

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

    <title> Navbar UI Interaction</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <style>
        * {
            box-sizing: border-box;
        }

        .wrapper {
            width: 100%;
            min-height: 100vh;
            background: #ddeef7;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            stroke-width: 0;
            stroke: currentColor;
            fill: currentColor;
        }

        .navbar {
            background: #fdfdfd;
            display: inline-flex;
            align-items: center;
            padding: 10px 20px 15px;
            box-shadow: 0px 20px 40px rgba(18, 34, 64, 0.1);
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
            position: relative;
        }
        .navbar:after {
            content: "";
            width: 120px;
            background: #d9e0ea;
            position: absolute;
            bottom: 8px;
            left: 50%;
            height: 3px;
            transform: translatex(-50%);
            opacity: 0.7;
        }
        .navbar__item {
            width: 70px;
            height: 70px;
            position: relative;
            cursor: pointer;
            padding: 10px;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 21px;
        }
        .navbar__item::before, .navbar__item:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: currentColor;
            border-radius: 50%;
            transform: scale(0.8);
            opacity: 0;
            transition: all 0.55s cubic-bezier(0.71, 0.03, 0.23, 0.95);
        }
        .navbar__item::after {
            box-shadow: 0 7px 15px currentColor;
        }
        .navbar__item.-blue {
            color: #06b8ff;
        }
        .navbar__item.-orange {
            color: #f2704d;
        }
        .navbar__item.-navy-blue {
            color: #405fff;
        }
        .navbar__item.-yellow {
            color: #f8cd4b;
        }
        .navbar__item.-purple {
            color: #8444d6;
        }
        .navbar__item:hover::before, .navbar__item:hover::after {
            transform: translateY(-60px) scale(1.1);
        }
        .navbar__item:hover::before {
            opacity: 1;
        }
        .navbar__item:hover::after {
            opacity: 0.4;
        }
        .navbar__item:hover .navbar__icon {
            transform: translateY(-58px) scale(1.25);
            color: #fff;
            transition-delay: 0.1s, 0.1s;
        }
        .navbar__icon {
            transition: all 0.5s cubic-bezier(0.71, 0.03, 0.23, 0.95);
            transition-delay: 0.1s;
            display: inline-block;
            position: relative;
            z-index: 2;
        }

    </style>

</head>
<body translate="no">
    <div class="wrapper">
        <div class="navbar">
            <div class="navbar__item -blue">
                <span class="navbar__icon">
                    <svg class="icon">
                        <use xlink:href="#icon-home"></use>
                    </svg>
                </span>
            </div>
            <div class="navbar__item -orange">
                <span class="navbar__icon">
                    <svg class="icon">
                        <use xlink:href="#icon-cup"></use>
                    </svg>
                </span>
            </div>
            <div class="navbar__item -navy-blue">
                <span class="navbar__icon">
                    <svg class="icon">
                        <use xlink:href="#icon-plus"></use>
                    </svg>
                </span>
            </div>
            <div class="navbar__item -yellow">
                <span class="navbar__icon">
                    <svg class="icon">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                </span>
            </div>
            <div class="navbar__item -purple">
                <span class="navbar__icon">
                    <svg class="icon">
      .........完整代码请登录后点击上方下载按钮下载查看