滑动效果菜单

效果图

HTML 代码

<div class="huadong">
            <nav>
                <a @click="clickMeabout(1)">Home</a>
                <a @click="clickMeabout(2)">About</a>
                <a @click="clickMeabout(3)">Services</a>
                <a @click="clickMeabout(4)">Portfolio</a>
                <a @click="clickMeabout(5)">Contact</a>
                <div :class="class_1"></div>
            </nav>
        </div>

ts 代码

<script setup lang="ts">
import { ref } from 'vue';

const class_1 = ref('animation')

const datamenu = ref<zoo>({
    1: 'animation strardhome',
    2: 'animation strardabute',
    3: 'animation strardservices',
    4: 'animation strardportfolio',
    5: 'animation strardcontact',
})

interface zoo {
    [value: number]: string
}

const clickMeabout = (value: number) => {
    class_1.value = datamenu.value[value]
}
</script>

css 代码

<style lang="scss" scoped>
.huadong {
    // position: absolute;
    // text-align: center;

    nav {
        position: relative;
        width: 600px;
        height: 40px;
        background-color: #34495e;
        border-radius: 8px;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

        .animation {
            position: absolute;
            height: 100%;
            width: 100px;
            background-color: #F97F51;
            z-index: 9;
            border-radius: 8px;
            transition: all 0.3s;
            // opacity: 0;
        }

        a {
            position: relative;
            display: block;
            float: left;
            font-size: 15px;
            line-height: 40px;
            width: 100px;
            height: 40px;
            text-decoration: none;
            color: #fff;
            text-transform: uppercase;
            text-align: center;
            z-index: 10;
            // background-color: #00B894;
        }

        a:hover {
            cursor: pointer;
        }

        .strardhome,
        a:nth-child(1):hover~.animation {
            width: 100px;
            left: 0px;
            // opacity: 1;
            // background-color: #F97F51;

        }


        .strardabute,
        a:nth-child(2):hover~.animation {
            width: 110px;
            left: 100px;
            // opacity: 1;
            // background-color: #F97F51;

        }

        .strardservices,
        a:nth-child(3):hover~.animation {
            width: 110px;
            left: 210px;
        }

        .strardportfolio,
        a:nth-child(4):hover~.animation {
            width: 160px;
            left: 320px;
        }

        .strardcontact,
        a:nth-child(5):hover~.animation {
            width: 120px;
            left: 480px;
        }

        a:nth-child(1) {
            width: 100px;
            // background-color: #00B894;
        }

        a:nth-child(2) {
            width: 110px;
            // background-color: #0984E3;
        }

        a:nth-child(3) {
            width: 110px;
            // background-color: ;
        }

        a:nth-child(4) {
            width: 160px;
            // background-color: #BDC581;
        }

        a:nth-child(5) {
            width: 120px;
            // background-color: #e056FD;
        }
    }
}
</style>

小结

有些的地方还是需要自己微调一下