文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用CSS怎么实现导航栏下划线跟随效果

2023-06-08 05:22

关注

使用CSS怎么实现导航栏下划线跟随效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

假设 HTML 结构如下:

<ul>  <li>不可思议的CSS</li>  <li>导航栏</li>  <li>光标小下划线跟随</li>  <li>PURE CSS</li>  <li>Nav Underline</li></ul>

实现需求

第一眼看到这个效果,感觉这个跟随动画,仅靠 CSS 是不可能完成的。

如果想只用 CSS 实现,只能另辟蹊径,使用一些讨巧的方法。

好,下面就借助一些奇技淫巧,使用 CSS 一步一步完成这个效果。分析一下难点:

宽度不固定

第一个难点, li 的宽度是不固定的。所以,我们可能需要从 li 本身的宽度上做文章。

既然每个 li 的宽度不一定,那么它对应的下划线的长度,肯定是是要和他本身相适应的。自然而然,我们就会想到使用它的 border-bottom

li {    border-bottom: 2pxsolid#000;}

那么,可能现在是这样子的(li 之间是相连在一起的,li 间的间隙使用 padding 产生):

使用CSS怎么实现导航栏下划线跟随效果

默认隐藏,动画效果

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

li {    border-bottom: 0pxsolid#000;}

推翻重来,借助伪元素

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

li::before {    content: "";    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    border-bottom: 2pxsolid#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: 2pxsolid#000;}li:hover::before {    width: 100%;}

得到,如下效果:

使用CSS怎么实现导航栏下划线跟随效果

左移左出,右移右出

OK,感觉离成功近了一步。现在还剩下一个最难的问题:

如何让线条跟随光标的移动动作,实现当从导航的左侧 li 移向右侧 li ,下划线从左往右移动。同理,当从导航的右侧 li 移向左侧 li ,下划线从右往左移动。

我们仔细看看,现在的效果:

使用CSS怎么实现导航栏下划线跟随效果

当从第一个 li 切换到第二个 li 的时候,第一个 li 下划线收回的方向不正确。所以,可以能我们需要将下划线的初始位置位移一下,设置为 left: 100% ,这样每次下划线收回的时候,第一个 li 就正确了:

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

看看效果:

使用CSS怎么实现导航栏下划线跟随效果

额,仔细对比两张图,第二种效果其实是捡了芝麻丢了西瓜。第一个 li 的方向是正确了,但是第二个 li 下划线的移动方向又错误了。

使用CSS怎么实现导航栏下划线跟随效果

神奇的 ~ 选择符

所以,我们迫切需要一种方法,能够不改变当前 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: 2pxsolid#000;    transition: 0.2salllinear;}li:hover::before {    width: 100%;    left: 0;}li:hover~li::before {    left: 0;}

至此,我们想要的效果就实现拉!撒花。看看:

使用CSS怎么实现导航栏下划线跟随效果

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

完整的DEMO可以戳这里: CodePen --Demo

最后

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

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

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

css的选择器有哪些

css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网行业资讯频道,感谢您对编程网的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯