开发者社区> 行者武松> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

不可思议的纯 CSS 导航栏下划线跟随效果

简介:
+关注继续查看

作者: 伯乐在线/chokcoco


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

640?wx_fmt=gif&wxfrom=5&wx_lazy=1

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

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

定义需求

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


<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 产生):

640?wx_fmt=png

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


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

}

得到,如下效果:

640?wx_fmt=gif

左移左出,右移右出

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

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

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

640?wx_fmt=gif

当从第一个 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%;

}

看看效果:

640?wx_fmt=gif

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

640?wx_fmt=jpeg

神奇的 ~ 选择符

所以,我们迫切需要一种方法,能够不改变当前 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;

}

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

640?wx_fmt=gif

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

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

最后

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

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

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

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

文章中的链接

① https://codepen.io/Chokcoco/pen/PRJvLN

② https://github.com/chokcoco/iCSS


原文发布时间:2018年04月18日 14:25:45

原文作者:伯乐在线/chokcoco

本文来源CSDN,如需转载请联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
第8天:CSS制作导航栏
今天主要学习了网页导航栏的制作。注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录。 一、导航栏实现步骤: 1、网页整体分为头部、内容、尾部。
958 0
html css 图片居中
与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱
1747 0
【HTML】通过不同的分辨率调用不同的css,两种方法:css本身判断、js调用css
<div style="margin:0px; padding:0px; max-width:100%; color:rgb(51,51,51); font-family:Arial,'Microsoft YaHei'; line-height:26.0400009155273px; height:auto!important; word-wrap:break-word!important
1913 0
HTML/CSS/js 日期等其他函数 相关收藏
整理了一下浏览器收藏夹里的东西,发现好多连接都死掉了http:// js日期加减得到新的日期 让Editplus自动格式化js、css、html 最佳的"addEvent"是怎样诞生的 JS 动态修改 input 的 type 属性 document.compatMode介绍 JS随机数的函数 JScrambler:保护你的JavaScript代码 js自定义对象 JS代
1330 0
HTML基础10--CSS常见问题
元素浮动之后 能设置宽度的话 就给元素加宽度 如果需要宽度是内容撑开 就给它里边的块元素 加上浮动; 第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题; IE6下子元素超出父级宽高,会把父级的宽高撑开 p 包含 div  标签嵌套规则。
859 0
HTML基础8--CSS、滑动门
滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。 CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式。
707 0
在线即时展现 Html、JS、CSS 编辑工具 - JSFiddle
在线即时展现 Html、JS、CSS 编辑工具 - JSFiddle 想对它做些说明介绍,可是它确是那么的容易使用。 后续有时间,把左侧列表作以相关介绍和示例演示吧。
1128 0
Notepad++ 配置 支持jquery、html、css、javascript、php代码提示
原文: Notepad++ 配置 支持jquery、html、css、javascript、php代码提示 官网下载:http://notepad-plus-plus.org/ 获取插件的方法:打开软件,窗口工具栏有有一个问号,点获取插件。
2030 0
python+flask+html/css+mysql+BAE 打造CSDN简历自动生成系统(附网站完全源码)
1.背景        一直想自己动手写个web app玩玩,前几天看了一个github的resume自动生成的web-app,所以就动手仿造了一个csdn的简历生成器。结构很简单,前端是html/css文件(这个模仿了github的那个网页,因为博主不太懂前端)。后台是一个爬虫软件,可以把csdn的个人信息爬下来,然后显示出来,最后部署到了百度云。百度的云数据库,真是坑爹.......,我
1925 0
桃园三结义之HTML、CSS、JavaScript
  需要解释一下,这篇文章不是讲核心技术的,我也只是刚刚接触,在这里只是跟大家一起认识一下HTML、CSS、JavaScript   牛腩新闻发布系统都快敲完了,系统中牛老师也对HTML、CSS、JavaScript做了简单介绍,而且整个系统的前台都在使用HTML和CSS。
857 0
+关注
行者武松
杀人者,打虎武松也。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
Java开发手册-孤尽秘传版
立即下载
低代码开发师(初级)实战教程
立即下载