master

分支 (1)

管理

管理

master

one-case-per-day
/
14.animated-navigation.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animated-navigation</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        body {
            width: 100vw;
            height:100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(to bottom, #eafbff 0%,#eafbff 50%,#5290f9 50%,#5290f9 100%);
        }

        nav {
            height: 60px;
            padding: 0 20px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 2px 6px 10px rgba(0,0,0,0.5);
            transition: width 1.2s linear;
        }

        ul {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: width 0.6s linear ,opacity 0.6s linear;
        }

        ul>li>a{
            padding: 10px;
            transform: rotateY(360deg);
        }

        .icon {
            position:relative;
            width: 30px;
            height: 30px;
            cursor: pointer;
            border: none;
            background-color: transparent;
        }

        .line1,.line2 {
            position: absolute;
            top: 15px;
            left: 5px;
            width: 20px;
            height: 2px;
            background-color: #5290f9;
            transition: transform 0.6s linear;
        }

        .line1 {
            transform:rotate(-45deg);
        }

        .line2 {
            transform:rotate(45deg);
        }

        .line1-active {
            transform: rotateY(-765deg) translateY(-5px);
        }

        .line2-active{
            transform: rotateY(765deg) translateY(5px);
        }


    </style>
</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Works</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
        <button class="icon">
            <div class="line1 line1-active"></div>
            <div class="line2 line2-active"></div>
        </button>
    </nav>

    <script>
        const icon = document.querySelector('.icon')
        const ul = document.querySelector('ul')
        let activeFlag = false // 默认激活

        // 点击icon =>
        icon.addEventListener('click',(e)=>{
            // 激活
            if(activeFlag){
                icon.children[0].classList.add('line1-active')
                icon.children[1].classList.add('line2-active')
                ul.style.width = '100%'
                ul.style.opacity = '1'
                activeFlag = false
            }else{
                icon.children[0].classList.remove('line1-active')
                icon.children[1].classList.remove('line2-active')
                ul.style.width = '0'
                ul.style.opacity = '0'
                activeFlag = true
            }
        },true)
    </script>

</body>
</html>