css3 vue2 vue3 实现导航栏下划线跟随鼠标滑动丝滑至极

本文链接：https://blog.csdn.net/weixin_67385044/article/details/136644341

本文详细展示了如何在Vue.js中使用模板和数据驱动来创建一个可切换的导航菜单，包括CSS样式和过渡效果的实现。

摘要由CSDN通过智能技术生成

1、效果图

2、直接上代码

<template>
<div class='section'>
        <ul class="ul">
            <li class="menu" v-for="(item,index)  in list" :key="index">{{item.name}}</li>
        </ul>
</div>
</template>

<script>
export default {
  name: '',
  components: {},
  data () {
    return {
        list:[
            {
                name:'首页'
            },
            {
                name:'行业'
            },
            {
                name:'产品定价'
            },
            {
                name:'招贤纳士'
            },
            {
                name:'关于我们'
            },
        ]
 }
  },
  created () {},
  mounted () {},
  methods: {}
}
</script>
<style scoped lang='scss'>
.section {
    width: 1200px;
    height: 100%;
}

.ul {
    display: flex;
}
.menu {
    position: relative;
    padding: 20px;
    font-size: 15px;
    color: #000;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer;
    list-style: none;
}
.menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #fc5531;
    transition: 0.2s all linear;
}
.menu:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #fc5531;
    z-index: -1;
}
.menu:hover ~ .menu::before {
    left: 0;
}
.menu:active {
    background: #fc5531; //点击时的效果
   color: #000000;
}
</style>