奇妙的CSS3—导航栏下划线跟随效果

先来看一下效果：

一、基本效果就是这样的 ，鼠标悬停，下划线划入。鼠标离开，下划线划出

二、下划线的划入是有方向的，从左侧划入悬停，下划线由左向右伸长。从右侧划入，下划线由又往左伸长

实现思路

一、导航是由ul+li组成的，在这里显然li 的宽度是不固定的。因此，咱们可能须要从 li 自己的宽度上作文章，

既然每一个 li 的宽度不必定，那么它对应的下划线的长度，确定是是要和他自己相适应的。因此 ，咱们能够在li  hover  的时候，借助伪元素。将下划线做用到每一个 li 的伪元素身上。

二、怎么样实现一个过渡效果的动画呢？咱们能够利用相对定位+决定定位，当li  hover 的时候，下划线要从一侧运动展开。

因此，咱们利用绝对定位，将 li 的伪元素的宽度设置为0，在 hover 的时候，宽度从 width: 0 -> width: 100%，OK 完美

三、左移左出，右移右出的问题怎么解决

如何让线条跟随光标的移动动做，实现当从导航的左侧 li 移向右侧 li，下划线从左往右移动。同理，当从导航的右侧 li 移向左侧 li，下划线从右往左移动

咱们迫切须要一种方法，可以不改变当前 hover 的 li 的下划线移动方式却能改变它下一个 li 的下划线的移动方式（好绕口）。

这里咱们能够借助 ~ 选择符，完成这个艰难的使命，对于当前 hover 的 li ，其对应伪元素的下划线的定位是 left: 100%，而对于 li:hover ~ li::before，它们的定位是 left: 0

示例代码：

一、结构html部分：

<ul>
    <li>奇妙的CSS</li>
    <li>导航栏</li>
    <li>前端</li>
    <li>CSS3</li>
    <li>Javascript</li>
</ul>

二、css部分

ul {
            display: flex;
            position: absolute;
            width: 800px;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        li {
            position: relative;
            padding: 20px;
            font-size: 24px;
            color: #000;
            line-height: 1;
            transition: 0.2s all linear;
            cursor: pointer;
            list-style: none;
        }

        li::before {
            content: "";
            position: absolute;
            top: 0;
            left: 100%;
            width: 0;
            height: 100%;
            border-bottom: 2px solid #000;
            transition: 0.2s all linear;
        }

        li:hover::before {
            width: 100%;
            top: 0;
            left: 0;
            transition-delay: 0.1s;
            border-bottom-color: #000;
            z-index: -1;
        }
        li:hover ~ li::before {
            left: 0;
        }

        li:active {
            background: #000;
            color: #fff;
        }

 

这就是css3之魅力