>

导航栏下划线跟随效果,光标小下划线跟随

- 编辑:至尊游戏网站 -

导航栏下划线跟随效果,光标小下划线跟随

难以置信的纯 CSS 导航栏下划线跟随效果

2018/04/02 · CSS · 下划线

正文小编: 伯乐在线 - chokcoco 。未经笔者许可,制止转发!
接待参预伯乐在线 专辑撰稿者。

先上张图,怎样采用纯 CSS 制作如下效果?

图片 1

在后续读书下文以前,你能够先缓大器晚成缓。尝试构思一下方面包车型大巴效果依旧入手尝试一下,不注重JS ,能不可能玄妙的落实上述成效。

OK,继续。这些作用是本身在工作支付的历程中遇见的一个周边的小标题。其实尽管让自个儿借助Javascript ,小编的第一反应也是,以为很劳顿啊。所以本尘凡接在想,有未有一点都不小或然只利用 CSS 完结这一个意义啊?

 

切图网在做项目标时候,为了越来越好的体会效果,经常大家会给页面参加各类卡通,作者个人是丰裕喜欢css3 动漫的,上面演示一下归纳的css3 动漫。

概念必要

笔者们定义一下简约的法规,须要如下:

  • 倘若 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,下划线从右往左移动。

 

html

完毕须求

首先眼观看那一个效能,认为那些跟随动漫,仅靠 CSS 是不容许做到的。

譬如想只用 CSS 完毕,只好别具炉锤,使用一些得益的秘籍。

好,上边就依靠一些奇伎淫巧,使用 CSS 一步一步成功那一个职能。深入分析一下难处:

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

增长幅度不固定

先是个困难, li 的上涨的幅度是不定点的。所以,大家大概供给从 li 本身的宽窄上做随笔。

既是各样 li 的上涨的幅度不自然,那么它对应的下划线的长短,料定是是要和他本身相适应的。大势所趋,大家就能够想到利用它的 border-bottom

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

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

那便是说,大概现在是这样子的(li 之间是反复在豆蔻梢头道的,li 间的间隙使用 padding 产生):

图片 2

css

私下认可蒙蔽,动漫效果

本来,这里一同头都以绝非下划线的,所以大家兴许须要把她们给隐蔽起来。

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

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

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

推翻重来,借助伪元素

像这种类型好像非常,因为掩没之后,hover li 的时候,须要下划线动画,而 li 本人自然是不可能活动的。所以,大家考虑依据伪成分。将下划线功效到各类 li 的伪成分之上。

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

1
2
3
4
5
6
7
8
9
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%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
}
 
li:hover::before {
    width: 100%;
}

得到,如下效果:

图片 3

咱俩那边依附 ~ 接纳符,对于当前的hover li ,其对应伪成分的下划线的固定是 left:百分百, 而 li:hover~li::before,它的一向是 left:0。

左移左出,右移右出

OK,认为离成功近了一步。未来还剩余二个最难的主题素材:

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

作者们留心看看,以后的机能:

图片 4

当从第三个 li 切换成第2个 li 的时候,第一个 li 下划线收回的趋势不科学。所以,能够能大家需求将下划线的初始地方位移一下,设置为 left: 100%,那样每一趟下划线收回的时候,第3个 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%;
}

寻访效果:
图片 5

额,留心相比两张图,第二种效应其实是捡了芝麻丢了水瓜。第二个 li 的趋向是科学了,可是第一个 li下划线的移动方向又漏洞比比较多了。图片 6

 

是还是不是极粗略,学习的尾声目标是行使,切图网专一于实战培养练习。

神奇的 ~ 选择符

由此,大家急迫需求风流罗曼蒂克种方法,能够不改造如今 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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
}

从那之后,大家想要的效果就兑现拉!撒花。看看:

图片 7

功用不错,正是有一些僵硬,大家能够恰到好处改善缓动函数以致丰硕多少个动漫延迟,就足以达成上述起首里的百般效果了。当然,那些都以为虎傅翼的装点。

生机勃勃体化的DEMO能够戳这里: CodePen 德姆o — 匪夷所思的CSS光标下划线跟随效果

最后

本方法最大的短处在于生机勃勃开头步入第叁个 li 的时候,线条只可以是从右往左,除此而外,都能很好的落到实处跟随效果。

悠久没更新了,近年来迷恋学习区块链相关技巧,举例以太坊编制程序,智能合约的编辑撰写巴拉巴拉的。前边依然会把越来越多精力放在本行,多出意气风发部分前端小说,CSS 的吸重力如故不也许招架的。

更加多优良 CSS 技术作品汇总在自己的 Github — iCSS ,持续更新,招待点个 star 订阅收藏。

好了,本文到此截止,希望对您有支持 :)

假定还犹怎么样疑难依然建议,能够多多交换,原创作品,文笔有限,德薄才疏,文中若有不正之处,万望告知。

打赏帮助自个儿写出越来越多好小说,谢谢!

打赏小编

打赏援助自身写出更加多好小说,多谢!

任选生龙活虎种支付格局

图片 8 图片 9

1 赞 6 收藏 评论

关于作者:chokcoco

图片 10

经不住光阴似箭,逃不过此间少年。 个人主页 · 小编的小说 · 63 ·    

图片 11

本文由硬件数码发布,转载请注明来源:导航栏下划线跟随效果,光标小下划线跟随