再次修改导航样式，看看哪个好看

最新推荐文章于 2024-05-28 13:09:25 发布
与妖为邻
最新推荐文章于 2024-05-28 13:09:25 发布
阅读量200
点赞数 1
文章标签： css 前端 javascript
本文链接：https://blog.csdn.net/lulei5153/article/details/138998266
版权
Right Here Waiting
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .main {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            .back {
                position: absolute;
                width: 25em;
                height: 4.8em;
                border-radius: 10px;
                box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
                background-color: #171717;
                z-index: -1;
            }
            .switch {
                display: block;
                position: relative;
                background-color: black;
                width: 84px;
                height: 54px;
                box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
                    inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c,
                    inset 0 0 2px 22px black;
                border-radius: 10px;
                padding: 20px;
                margin: 5px;
                a {
                    position: absolute;
                    top: 5px;
                    left: 10px;
                    color: rgb(255, 255, 255);
                    text-decoration: none;
                    /* 字体模糊 */
                    filter: blur(2px);
                    font-size: 2em;
                    text-align: center;
                    z-index: 1;
                }
                input {
                    display: none;
                    &:checked+.button .light {
                        animation: flicker 0.2s infinite 0.3s;
                    }
                    &:checked+.button .shine {
                        opacity: 1;
                    }
                    &input:checked+.button .shadow {
                        opacity: 0;
                    }
                }
                .button {
                    /* transition: all 0.3s cubic-bezier(1, 0, 1, 1); */
                    width: 73px;
                    height: 43px;
                    border-radius: 5px;
                    position: relative;
                    left: -0.9em;
                    top: -0.9em;
                    cursor: pointer;
                }
                .light {
                    opacity: 0;
                    animation: light-off 1s;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    color: rgb(255, 255, 255);
                    text-shadow: 1px 1px 2px #000000;
                    font-size: 2em;
                    font-weight: bold;
                    text-align: center;
                }
                .dots {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-size: 10px 10px;
                    border-radius: 5px;
                }
            }
        }
        .switch1 {
            .button {
                background-color: #9b0621;
            }
            .light {
                background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
            }
            .dots {
                background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.653) 70%);
            }
            input:checked+.button {
                box-shadow: 0 0px 20px #f30404;
            }
        }
        @keyframes flicker {
            0% {
                opacity: 1;
            }
            80% {
                opacity: 0.8;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes light-off {
            0% {
                opacity: 1;
            }
            80% {
                opacity: 0;
            }
        }
        .switch2 {
            .button {
                background-color: #949207;
            }
            .light {
                background-image: radial-gradient(#f6ff7e, #eeff00 40%, transparent 70%);
            }
            .dots {
                background-image: radial-gradient(transparent 30%, rgba(91, 101, 0, 0.7) 70%);
            }
            input:checked+.button {
                box-shadow: 0 0px 20px #faf60c;
            }
        }
        .switch3 {
            .button {
                background-color: #2f9407;
            }
            .light {
                background-image: radial-gradient(#f6ff7e, #00ff00 40%, transparent 70%);
            }
            .dots {
                background-image: radial-gradient(transparent 30%, rgba(0, 101, 13, 0.7) 70%);
            }
            input:checked+.button {
                box-shadow: 0 0px 20px #52ff0e;
            }
        }
        .switch4 {
            .button {
                background-color: #8d849a;
            }
            .light {
                background-image: radial-gradient(#ffc97e, #ecdefd 40%, transparent 70%);
            }
            .dots {
                background-image: radial-gradient(transparent 30%, #423e4771 70%);
            }
            input:checked+.button {
                box-shadow: 0 0px 20px #ffffff;
            }
        }
        .switch .shine {
            border-radius: 5px;
            transition: all 0.3s cubic-bezier(1, 0, 1, 1);
            opacity: 0.3;
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%,
                linear-gradient(rgba(255, 255, 255, 0.5),
                    transparent 50%,
                    transparent 80%,
                    rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="back"></div>
        <label class="switch switch1">
            <a href="#">首页</a>
            <input checked="" type="radio" name="value-radio">
            <div class="button">
                <div class="light">首页</div>
                <div class="dots"></div>
                <!-- <div class="characters"></div> -->
                <div class="shine"></div>
            </div>
        </label>
        <label class="switch2 switch">
            <a href="#">学习</a>
            <input type="radio" name="value-radio">
            <div class="button">
                <div class="light">学习</div>
                <div class="dots"></div>
                <div class="characters"></div>
                <div class="shine"></div>
            </div>
        </label>
        <label class="switch3   switch">
            <a href="#">学习</a>
            <input type="radio" name="value-radio">
            <div class="button">
                <div class="light">学习</div>
                <div class="dots"></div>
                <div class="characters"></div>
                <div class="shine"></div>
            </div>
        </label>
        <label class="switch4 switch">
            <a href="#">关于</a>
            <input type="radio" name="value-radio">
            <div class="button">
                <div class="light">关于</div>
                <div class="dots"></div>
                <!-- <div class="characters"></div> -->
                <div class="shine"></div>
            </div>
        </label>
    </div>
</body>
</html>