html导航栏选中状态原生js,0行JS，30行css搞定导航栏下划线跟随效果

86 阅读 0 评论 57 点赞

前言

AAffA0nNPuCLAAAAAElFTkSuQmCC

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

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

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

解析

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

1、假设 HTML 结构如下：

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;<

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。