2019年01月25日阅读 558242

0行JS，30行css搞定导航栏下划线跟随效果

前言

在码代码之前了，我们可以尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果？

在这之前了，有一次需求就是实现这个效果，我是用js实现的。其实用 Javascript ，也是很麻烦。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？

好的，今天我们就用CSS完成这个效果。

解析

我们定义一下简单的规则，要求如下：

1、假设 HTML 结构如下：

<ul class="cssnav">
  <li>Web秀</li>
  <li>CSS导航栏</li>
  <li>今日头条</li>
  <li>开源中国</li>
</ul>

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

看整个效果，我们不知道如何做起的时候，我们先一步一步来，先完成前2个效果。

第一步

.cssnav {
	position: absolute;
	display: flex;
}

.cssnav li {
	position: relative;
	list-style: none;
	padding: 20px;
	font-size: 24px;
	color: #000;
	line-height: 1;
	cursor: pointer;
}

0行JS，30行css搞定导航栏下划线跟随效果

这里用到了flex布局，相信一直和我一起学习的小伙伴，应该都会了，这里不做过多的解释了，不明白的，请看:

《CSS中Flex布局的可伸缩性(Flexibility)》
《CSS3中Flex布局（弹性布局）》
《CSS3实现瀑布流布局(display: flex/column-count/display: grid)》

第二步

很多小伙伴，应该第一想法是用border-bottom来实现下面的底边效果。但是是不是忽视了整个li是不能移动的了？所以这个是行不通的，我们用:before伪类来实现底边，同时可以移动。

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

0行JS，30行css搞定导航栏下划线跟随效果

这样，我们距离成功越来越近了。

下面我们考虑动画部分，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%;
}

0行JS，30行css搞定导航栏下划线跟随效果

额，这时候的效果并不对，好像缺少了过渡效果，很僵硬。于是添加过渡效果。

li::before {
	...
	transition: 0.2s all linear;
}

于是，就有了这个效果。细心的小伙伴是不是发现，效果还是不对了？如果看不出来的小伙伴，可以把过渡效果时间设置长一点(0.5s)。第一个 li 的方向是正确了，但是第二个 li下划线的移动方向又错误了。

0行JS，30行css搞定导航栏下划线跟随效果

~ 选择符

所以，我们需要一种方法，能够不改变当前 hover 的 li 的下划线移动方式，却能改变它下一个 li 的下划线的移动方式。

这里我们可以借助 ~ 选择符，完成最重要的部分。

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

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

li:hover ~ li::before {
	left: 0;
}

ok，效果已经全部搞定，是不是超级简单了？

如果觉得效果有点僵硬，我们可以再添加动画延迟。

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

演示地址： 0行JS，30行css搞定导航栏下划线跟随效果

0行JS，30行css搞定导航栏下划线跟随效果

前言

解析

第一步

第二步

~ 选择符

推荐文章