这是我参与8月更文挑战的第5天，活动详情查看： 8月更文挑战
登录华为云的时候看到顶部导航栏效果挺好的就想实现一个
先看看华为云官网的大概效果
下划线跟随鼠标移动效果（上图）
首先分析一下大概做法：
- 过渡动画
- 下划线有一个由长到慢的过程
- 监听鼠标在那一个栏目的下面
总之就是，监听鼠标的移动，然后让当前导航栏的下划线从0到100%占满。
有思路后先走一波代码，然后慢慢调试：
<ul>
<li>跟着</li>
<li>导航栏</li>
<li>光标小下划线跟随</li>
<li>跟随走动的下划线</li>
<li>跟随走动</li>
</ul>
效果如下图：
然后我们让li水平一行展示:
ul li {float: left;display: block; list-style: none;margin-left: 20px;border-bottom: 2 px black solid;position: relative;}
导航栏已经能正常显示，接下来就是下划线了
- 使用伪元素实现下划线
- 鼠标移动到那儿就展示当前伪元素
ul li::before {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%;border-bottom: 2px solid red;width: 100%; }
这样的话，底部下划线也已经可以看到（如下图）
底部下划线也已经有了，接下来就是鼠标移动到那儿，那个的导航栏下划线展示，这个用hover就能实现
我们可以先让所有li的伪类长度为0 ，hover到当前时使其宽度为100%
ul li:hover::before {width: 100%;}
我们看下效果图：
我们看到鼠标移动到某个导航栏下导航栏下的下划线能够展示，但是很生硬，这里我们设置一个transition
transition: 0.2s all linear;
这是设置transition后的动画，看到的效果已经越来越接近，但是还是有两个问题
- 鼠标移开后上一个下划线回向左减少
- 鼠标往上一个导航栏移动时应该从右向左移动，现在还是从左向右移动 思路
- 我们让每一个伪类的left设置为100%，
- 把当前鼠标所在的下一个导航栏的left设置为0
这样的话会造成视觉差形成鼠标跟随效果，效果如下图：
大概效果就实现了，有一个问题就是hover的第一元素下划线移动位置还是从右往左增长，其他效果大致相同 华为云的导航栏的话，应该使用的js实现的，喜欢的大佬可以自己去看看，我这儿就实现一个简陋版的css实现过程
<!--
* @Descripttion:
* @version:
* @Author: shijuwang
* @Date: 2021-08-02 17:23:57
* @LastEditors: shijuwang
* @LastEditTime: 2021-08-02 15:09:41
-->
代码地址： >>> 项目查看
