先上张图,如何使用纯 CSS 制作如下效果?

在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。

OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?

定义需求

我们定义一下简单的规则,要求如下:

  • 假设 HTML 结构如下:
<ul>
<li>不可思议的CSS</li>
<li>导航栏</li>
<li>光标小下划线跟随</li>
<li>PURE CSS</li>
<li>Nav Underline</li>
</ul>
  • 导航栏目的 li 的宽度是不固定的
  • 当从导航的左侧 li 移向右侧 li,下划线从左往右移动。同理,当从导航的右侧 li 移向左侧 li,下划线从右往左移动。

实现需求

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

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

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

宽度不固定

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

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

li {
border-bottom: 2px solid #000;
}

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

默认隐藏,动画效果

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

li {
border-bottom: 0px solid #000;
}

推翻重来,借助伪元素

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

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

得到,如下效果:

左移左出,右移右出

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

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

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

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

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

看看效果:

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

神奇的 ~ 选择符

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

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

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

完整的DEMO可以戳这里: CodePen Demo -- 不可思议的CSS光标下划线跟随效果

最后

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

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

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

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

不可思议的纯CSS导航栏下划线跟随效果的更多相关文章

  1. 纯CSS导航栏下划线跟随效果

    参考文章 <ul> <li>111</li> <li>2222</li> <li>3333333</li> < ...

  2. 纯css导航栏下划线

    .nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...

  3. css实现导航栏下划线跟随效果

    话不多说先附上代码 <style> ul li { float: left; display: block; list-style: none; margin-left: 20px; bo ...

  4. 奇妙的CSS3—导航栏下划线跟随效果

    先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...

  5. CSSTab栏下划线跟随效果

    神奇的 ~ 选择符 对于当前 hover 的 li ,其对应伪元素的下划线的定位是 left: 100%,而对于 li:hover ~ li::before,它们的定位是 left: 0. ul li ...

  6. [HTML/CSS]导航栏的下划线跟随效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 纯css导航下划线跟随效果【转载】

    css: ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate ...

  8. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  9. tab 切换下划线跟随实现

    HTML 结构如下: <ul> <li class="active">不可思议的CSS</li> <li>导航栏</li> ...

随机推荐

  1. Android内核解读-应用的安装过程

    前言 我们知道,在android手机上安装一个apk很简单,只要打开apk文件,默认就会弹出安装界面,然后点击确定,经过若干秒后,apk就安装成功了,可是你知道apk的安装过程是什么吗?你知道andr ...

  2. R语言︱排序问题

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 数据排序 1.sort(),rank(),or ...

  3. HighCharts之气泡图

    HighCharts之气泡图 1.HighCharts之气泡图源码 bubble.html: <!DOCTYPE html> <html> <head> <m ...

  4. Java Web项目(Extjs)报错五

    1. Java Web项目(Extjs)报错五 具体报错如下: usage: java org.apache.catalina.startup.Catalina [ -config {pathname ...

  5. VxWorks中的中断应用设计要点

    硬件中断处理是实时系统设计中的关键性问题,设计人员有必要对其作深入研究,以更好地满足开发工作需要.文中以VxWorks操作系统为软件平台,讨论了在实时系统中进行中断应用设计时要注意的一些问题.由于软硬 ...

  6. MySQL日期类型和毫秒值相互转换

    有时需要将日期类型值转换成毫秒值,有时也要将毫秒值转换成日期,为了更方便,满足查询的需要. 现在,新建一张数据库表t_stu_info,并向表里插入数据 use test; show tables; ...

  7. Openstack_O版(otaka)部署_镜像服务glance部署

    安装和配置服务 1. 建库建用户 mysql -u root -p CREATE DATABASE glance; GRANT ALL PRIVILEGES ON glance.* TO '; GRA ...

  8. 关于jquery插件模板的两个案例

    /** * jquery tips 提示插件 jquery.tips.js v0.1beta * * 使用方法 * $(selector).tips({ //selector 为jquery选择器 * ...

  9. 【原】【译文】理解storm拓扑并行度

    原文地址: http://storm.apache.org/releases/1.2.1/Understanding-the-parallelism-of-a-Storm-topology.html ...

  10. SpringMVC 框架系列之初识与入门实例

    微信公众号:compassblog 欢迎关注.转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.SpringMVC 概述 (1). MVC:Model-View-Control Contr ...