一个HTML 导航栏下划线跟随效果

---恢复内容开始---

这几日学习html，一直在B站乱逛，发现网站的动效做的还是真多。然后翻到了这一页：

点此查看

上面的导航栏是一个下划线跟随的效果。由于有一个初始的选项（当前页面对应标签保持蓝色），鼠标划过时除了高亮项下面的下划线也要跟随。如果只实现前面这些效果可以用css完成，但是其实这里面的下划线是一个动画效果，仔细观察发现下划线相当于在border-bottom上面做水平运动，切换标签时有一个过渡效果，因此实际上这个下划线其实是一个独立的bar滑块

结构定义如下：

    <div class="nav">
        <ul>
            <li class="now" id="cur"><a href="#">综合</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">番剧</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">直播</a></li>
        </ul>
        <div class="go hover_bar"></div>
    </div>

nav正常排版并设position为相对位移，div如下：

        .go {
            width: 32px;
            height: 3px;
            background-color: #00a1d6;
            position: absolute;
            left: 0;
            bottom: 0;
            transition: all .2s cubic-bezier(0.215, 0.610, 0.355, 1) 0s;

        }

假定每个标签的宽度间距固定，那么只要在js中监听鼠标事件，让bar移动n个标签的距离即可。完成的动态效果基本与目标一致