纯CSS实现导航栏下划线跟随滑动效果

这篇文章主要介绍了纯CSS实现导航栏下划线跟随滑动效果,需要的朋友可以参考下！

老规矩先上张图，如何使用纯 CSS 制作如下效果？

默认隐藏，动画效果

当然，这里一开始都是没有下划线的，所以我们可能需要把他们给隐藏起来。

li {

border-bottom: 0px solid #000;

}

推翻重来，借助伪元素

这样好像不行，因为隐藏之后，hover li 的时候，需要下划线动画，而 li 本身肯定是不能移动的。所以，我们考虑借助伪元素。将下划线作用到每个 li 的伪元素之上

li::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-bottom: 2px solid #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: 2px solid #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: 2px solid #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: 2px solid #000;

transition: 0.2s all linear;

}

li:hover::before {

width: 100%;

left: 0;

}

li:hover ~ li::before {

left: 0;

}

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

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

完整的DEMO可以戳这里: CodePen Demo -- 不可思议的CSS光标下划线跟随效果

最后

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

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

总结

以上所述是小编给大家介绍的纯CSS实现导航栏下划线跟随滑动效果，希望对大家有所帮助。