黏糊糊的菜单

news2024/11/27 21:03:38

先看效果：
在这里插入图片描述

再看代码：

<!--黏糊糊的菜单 可融合-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>黏糊糊的菜单</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            filter: url('#goo')
        }

        figure {
            margin: 0;
        }

        .main-container {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .float-menu-container {
            width: 600px;
            height: 600px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border-radius: 50%;
        }

        .hamburger-icon {
            background-color: #4c51bf;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 500ms all ease-in-out;
            cursor: pointer;
            position: relative;
            z-index: 99;
            overflow: hidden;
        }

        .hamburger-icon span {
            width: 40px;
            height: 6px;
            background: white;
            transition: 500ms all ease-in-out;
            border-radius: 10px;
            position: relative;
        }

        .hamburger-icon span::before,
        .hamburger-icon span::after {
            content: "";
            position: absolute;
            width: 40px;
            height: 6px;
            background: white;
            transition: 500ms all ease-in-out;
            border-radius: 10px;
        }

        .hamburger-icon span::before {
            transform: translateY(-16px);
        }

        .hamburger-icon span::after {
            transform: translateY(16px);
        }

        .hamburger-icon.active span {
            transform: translateX(-50px);
            background-color: transparent;
        }

        .hamburger-icon.active span::before {
            transform: rotate(45deg) translate(35px, -35px);
        }

        .hamburger-icon.active span::after {
            transform: rotate(-45deg) translate(35px, 35px);
        }

        .nav-container {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .nav {
            position: relative;
        }

        .nav-item {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: 700ms all;
        }

        .clicked .nav-item:nth-child(1) {
            position: absolute;
            left: 0;
            right: -48px;
            transform: translate(-24px, -150px);
            transition: 1100ms all;
        }

        .clicked .nav-item:nth-child(2) {
            position: absolute;
            left: 0;
            right: -48px;
            transform: translate(-154px, -100px);
            transition: 1200ms all;
        }

        .clicked .nav-item:nth-child(3) {
            position: absolute;
            left: 0;
            right: -48px;
            transform: translate(-138px, 5px);
            transition: 1300ms all;
        }

        .clicked .nav-item:nth-child(4) {
            position: absolute;
            left: 0;
            right: -48px;
            transform: translate(-184px, 110px);
            transition: 1400ms all;
        }

        .clicked .nav-item:nth-child(5) {
            position: absolute;
            left: 0;
            right: -48px;
            transform: translate(-54px, 80px);
            transition: 1500ms all;
        }

        .clicked .nav-item:nth-child(6) {
            position: absolute;
            left: 0;
            right: -48px;
            transform: translate(66px, 100px);
            transition: 1600ms all;
        }

        .clicked .nav-item:nth-child(7) {
            position: absolute;
            left: 0;
            right: -48px;
            transform: translate(130px, 20px);
            transition: 1700ms all;
        }

        .clicked .nav-item:nth-child(8) {
            position: absolute;
            left: 0;
            right: -48px;
            transform: translate(86px, -90px);
            transition: 1800ms all;
        }

        .nav-item figure {
            width: 50px;
            height: 50px;
            background-color: #667eea;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            /*   box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
                rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
                rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; */
            cursor: pointer;
        }

        .nav-item:nth-child(1) figure {
            animation: float 5s ease-in-out infinite;
        }
        .nav-item:nth-child(2) figure {
            animation: float 4s ease-in-out infinite;
        }
        .nav-item:nth-child(3) figure {
            animation: float 3s ease-in-out infinite;
        }
        .nav-item:nth-child(4) figure {
            animation: float 4s ease-in-out infinite;
        }
        .nav-item:nth-child(5) figure {
            animation: float 5s ease-in-out infinite;
        }
        .nav-item:nth-child(6) figure {
            animation: float 4s ease-in-out infinite;
        }
        .nav-item:nth-child(7) figure {
            animation: float 3s ease-in-out infinite;
        }
        .nav-item:nth-child(8) figure {
            animation: float 4s ease-in-out infinite;
        }

        .nav-item figure svg {
            width: 32px;
            height: 32px;
        }

        .nav-item figure:hover{
            background-color: #a3bffa;
            border-color: white;
        }

        .nav-item figure:hover svg{
            fill: #4c51bf;
        }

        @keyframes float {
            0% {
                box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
                transform: translatey(0px);
            }
            50% {
                box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
                transform: translatey(-15px);
            }
            100% {
                box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
                transform: translatey(0px);
            }
        }

    </style>
</head>

<body>
<div class="main-container">
    <div class="float-menu-container">
        <div id="hamburger" class="hamburger-icon" onclick="toggleActiveIcon()">
            <span></span>
        </div>
        <div id="nav-container" class="nav-container">
            <div class="nav">
                <div class="nav-item">
                    <figure>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white">
                            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                        </svg>
                    </figure>
                </div>
                <div class="nav-item">
                    <figure>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
                            <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
                            <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
                        </svg>
                    </figure>
                </div>
                <div class="nav-item">
                    <figure>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                        </svg>
                    </figure>
                </div>
                <div class="nav-item">
                    <figure>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                    </figure>
                </div>
                <div class="nav-item">
                    <figure>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
                            <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                        </svg>
                    </figure>
                </div>
                <div class="nav-item">
                    <figure>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
                            <path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z" />
                        </svg>
                    </figure>
                </div>
                <div class="nav-item">
                    <figure>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z" clip-rule="evenodd" />
                        </svg>
                    </figure>
                </div>
                <div class="nav-item">
                    <figure>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
                            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
                        </svg>
                    </figure>
                </div>
            </div>
        </div>
    </div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="shadowed-goo">

            <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="16" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
            <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
            <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
            <feOffset in="shadow" dx="1" dy="1" result="shadow" />
            <feComposite in2="shadow" in="goo" result="goo" />
            <feComposite in2="goo" in="SourceGraphic" result="mix" />
        </filter>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
            <feComposite in2="goo" in="SourceGraphic" result="mix" />
        </filter>
    </defs>
</svg>
</body>

<script>
    const hamburgerIcon = document.getElementById("hamburger");
    const navContainer = document.getElementById("nav-container")

    function toggleActiveIcon() {
        hamburgerIcon.classList.toggle("active");
        navContainer.classList.toggle("clicked")
    }
</script>

</html>