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

2019-05-01 作者:计算机教程   |   浏览(111)

定义需求

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

  • 假设 HTML 结构如下:
<ul> <li>不可思议的CSS</li>
<li>导航栏</li> <li>光标小下划线跟随</li>
<li>PURE CSS</li> <li>Nav Underline</li>
</ul>

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b0473490387173502-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b0473490387173502-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b0473490387173502-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b0473490387173502-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6b0473490387173502-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b0473490387173502-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6b0473490387173502-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b0473490387173502-1" class="crayon-line">
&lt;ul&gt;
</div>
<div id="crayon-5b8f6b0473490387173502-2" class="crayon-line crayon-striped-line">
  &lt;li&gt;不可思议的CSS&lt;/li&gt;
</div>
<div id="crayon-5b8f6b0473490387173502-3" class="crayon-line">
  &lt;li&gt;导航栏&lt;/li&gt;
</div>
<div id="crayon-5b8f6b0473490387173502-4" class="crayon-line crayon-striped-line">
  &lt;li&gt;光标小下划线跟随&lt;/li&gt;
</div>
<div id="crayon-5b8f6b0473490387173502-5" class="crayon-line">
  &lt;li&gt;PURE CSS&lt;/li&gt;
</div>
<div id="crayon-5b8f6b0473490387173502-6" class="crayon-line crayon-striped-line">
  &lt;li&gt;Nav Underline&lt;/li&gt;
</div>
<div id="crayon-5b8f6b0473490387173502-7" class="crayon-line">
&lt;/ul&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • 导航栏目的 li 的宽度是不固定的
  • 当从导航的左侧 li 移向右侧 li,下划线从左往右移动。同理,当从导航的右侧 li 移向左侧 li,下划线从右往左移动。

 

li{ display: inline-block; position: relative; padding: 0 10px;}

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

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

2018/04/02 · CSS · 下划线

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

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

图片 1

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

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

 

切图网在做项目的时候,为了更好的体验效果,通常我们会给页面加入各种动画,我个人是非常喜欢css3 动画的,下面演示一下简单的css3 动画。

默认隐藏,动画效果

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

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

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

html

左移左出,右移右出

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

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

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

图片 2

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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%;
}

看看效果:
图片 3

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

 

css

最后

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

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

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

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

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

打赏支持我写出更多好文章,谢谢!

打赏作者

是不是很简单,学习的最终目的是运用,切图网专注于实战培训。

实现需求

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

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

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

<ul>
<li>光标小下划线跟随</li>
<li>光标小下划线跟随</li>
<li>光标小下划线跟随</li>
</ul>

本文由www.2003.com发布于计算机教程,转载请注明出处:不可思议的纯 CSS 导航栏下划线跟随效果

关键词: