原文：一个HTML 导航栏下划线跟随效果
这几日学习html，一直在B站乱逛，发现网站的动效做的真好。然后翻到了这一页： 点此查看 上面的导航栏是一个下划线跟随的效果。由于有一个初始的选项 当前页面对应标签保持蓝色 ，鼠标划过时除了高亮项下面的下划线也要跟随。如果只实现前面这些效果可以用css完成，但是其实这里面的下划线是一个动画效果，仔细观察发现下划线相当于在border bottom上面做水平运动，切换标签时有一个过渡效果，因此实际上 ...
2018-10-08 01:32 0 3122 推荐指数：
相关推荐
就像上图这样的动画效果 在导航栏里的时候，下划线跟随鼠标移动，鼠标移出导航栏时，下划线回到初始位置，同时要适应导航的宽度 为了适应导航的宽度，就不能给导航元素设置 margin，然后将导航元素的 clientWidth 设置给下划线 然后需要让下划线独立于导航之外，从而保证它的无缝 ...
先来看一下效果： 1、基本效果就是这样的 ，鼠标悬停，下划线划入。鼠标离开，下划线划出 2、下划线的划入是有方向的，从左侧划入悬停，下划线由左向右伸长。从右侧划入，下划线由又往左伸长 实现思路 1、导航是由ul+li组成的，在这里显然li 的宽度是不固定 ...
神奇的 ~ 选择符 对于当前 hover 的 li ，其对应伪元素的下划线的定位是 left: 100%，而对于 li:hover ~ li::before，它们的定位是 left: 0。 ul li { float: left; width: 20 ...
先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 ...
先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是 ...
<ins>即下划线标签 但是通常来讲，不要给普通文本加下划线，因为用户会误以为是一个超链 ...