难以想象的CSS导航栏下划线跟随效果

转载： 国服第一切图仔 github.com/chokcoco

先上张图，如何使用纯 CSS 制做以下效果？

在继续阅读下文以前，你能够先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，可否巧妙的实现上述效果。

OK，继续。这个效果是我在业务开发的过程当中遇到的一个相似的小问题。其实即使让我借助 Javascript ，个人第一反应也是，感受很麻烦啊。因此我一直在想，有没有可能只使用 CSS 完成这个效果呢？

定义需求

咱们定义一下简单的规则，要求以下：

• 假设 HTML 结构以下：

<ul>
  <li>难以想象的CSS</li>
  <li>导航栏</li>
  <li>光标小下划线跟随</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>
复制代码

• 导航栏目的 li 的宽度是不固定的
• 当从导航的左侧 li 移向右侧 li，下划线从左往右移动。同理，当从导航的右侧 li 移向左侧 li，下划线从右往左移动。

实现需求

第一眼看到这个效果，感受这个跟随动画，仅靠 CSS 是不可能完成的。

若是想只用 CSS 实现，只能另辟蹊径，使用一些讨巧的方法。

好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成这个效果。分析一下难点：

宽度不固定

第一个难点， li 的宽度是不固定的。因此，咱们可能须要从 li 自己的宽度上作文章。

既然每一个 li 的宽度不必定，那么它对应的下划线的长度，确定是是要和他自己相适应的。天然而然，咱们就会想到使用它的 border-bottom 。

li {
    border-bottom: 2pxsolid#000;
}
复制代码

那么，可能如今是这样子的（li 之间是相连在一块儿的，li 间的间隙使用 padding 产生）：

默认隐藏，动画效果

固然，这里一开始都是没有下划线的，因此咱们可能须要把他们给隐藏起来。

li {
    border-bottom: 0pxsolid#000;
}
复制代码

推翻重来，借助伪元素

这样好像不行，由于隐藏以后，hover li 的时候，须要下划线动画，而 li 自己确定是不能移动的。因此，咱们考虑借助伪元素。将下划线做用到每一个 li 的伪元素之上。

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 2pxsolid#000;
}
复制代码

下面考虑第一步的动画，hover 的时候，下划线要从一侧运动展开。因此，咱们利用绝对定位，将 li 的伪元素的宽度设置为0，在 hover 的时候，宽度从 width: 0 -> width: 100%，CSS 以下：

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-bottom: 2pxsolid#000;
}

li:hover::before {
    width: 100%;
}
复制代码

获得，以下效果：

左移左出，右移右出

OK，感受离成功近了一步。如今还剩下一个最难的问题：

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

咱们仔细看看，如今的效果：

当从第一个 li 切换到第二个 li 的时候，第一个 li 下划线收回的方向不正确。因此，能够能咱们须要将下划线的初始位置位移一下，设置为 left: 100%，这样每次下划线收回的时候，第一个 li 就正确了：

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2pxsolid#000;
}

li:hover::before {
    left: 0;
    width: 100%;
}
复制代码

看看效果：

额，仔细对比两张图，第二种效果实际上是捡了芝麻丢了西瓜。第一个 li 的方向是正确了，可是第二个 li 下划线的移动方向又错误了。

神奇的 ~ 选择符

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

没错了，这里咱们能够借助~选择符，完成这个艰难的使命，也是这个例子中，最最重要的一环。

对于当前 hover 的 li ，其对应伪元素的下划线的定位是 left: 100%，而对于 li:hover ~ li::before，它们的定位是 left: 0。CSS 代码大体以下：

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2pxsolid#000;
    transition: 0.2salllinear;
}

li:hover::before {
    width: 100%;
    left: 0;
}

li:hover~li::before {
    left: 0;
}
复制代码

至此，咱们想要的效果就实现拉！撒花。看看：

效果不错，就是有点僵硬，咱们能够 适当改变缓动函数 以及加上一个 动画延迟 ，就能够实现上述开头里的那个效果了。固然，这些都是锦上添花的点缀。

完整的DEMO能够戳这里: CodePen --Demo

最后

本方法 最大的瑕疵 在于一开始进入第一个 li 的时候，线条只能是从右往左，除此以外，都能很好的实现跟随效果。

许久没更新了，最近沉迷学习区块链相关技术，譬如以太坊编程，智能合约的编写巴拉巴拉的。后面仍是会把更多精力放在本行，多出一些前端文章，CSS 的魅力仍是没法抵挡的。

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

好了，本文到此结束，但愿对你有帮助 :)

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。