CSS

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

前言

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搞定导航栏下划线跟随效果

推荐文章

《CSS选择器如此之多,你了解多少?》
《CSS中Flex布局的可伸缩性(Flexibility)》
《CSS3中Flex布局(弹性布局)》
《CSS3实现瀑布流布局(display: flex/column-count/display: grid)》
《CSS3中transition、transform傻傻分不清楚》

(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注