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

设计思路 :

  1. 利用绝对定位,将 li 的伪元素的宽度设置为 0
  2. 在 hover 的时候,宽度从 width: 0 -> width: 100%
  3. 左移左出,右移右出 :

    • 将下划线的 left 偏移量初始位置设置为 left: 100%
    • 当鼠标 hover 的时候, left 偏移量设置为 0
    • 使用 ~ 选择符,改变当前选择元素 之后 所有元素的行为 :
      在不改变当前 hover 的 li 的下划线移动方式,而改变它下一个 li 的下划线的移动方式,
      对于当前 hover 的 li ,其对应伪元素的下划线的定位是 left: 100%,而对于 li:hover ~li::before,它们的定位是 left: 0。

神奇的 ~ 选择符

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

点击 tab 跟随

结合 js 使用 active 类即可实现 点击 tab 跟随

.active ~ li::before {
left: 0;
}
.active::before {
width: 100%;
left: 0;
top: 0;
}

// 使用 jquery

$('li').on('click', function () {
$(this).addClass('active').siblings().removeClass('active')
})

参考资料

不可思议的CSS光标下划线跟随效果
GitHub - chokcoco/iCSS
不可思议的纯CSS导航栏下划线跟随效果
tab 切换下划线跟随实现

tab 切换下划线跟随实现的更多相关文章

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

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

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

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

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

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

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

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

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

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

  6. 移动端tab切换时下划线的滑动效果

    1.当前 tab 出现下划线的同时,前一个下划线同时消失(出现方向与消失方向保持一致),伴随过渡效果. <!DOCTYPE html><html lang="en" ...

  7. android实现对导航Tab设置下划线选中效果

    技术人员核心竞争力还是技术啊.努力提高各种实现效果.加油哦! 直接看效果.此linearLayout只有两个Button ,当选中Button1,Button1有个下划线选中效果.当选中Buton2, ...

  8. CSSTab栏下划线跟随效果

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

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

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

随机推荐

  1. 吴裕雄--天生自然python Google深度学习框架:MNIST数字识别问题

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data INPUT_NODE = 784 ...

  2. PAT甲级——1050 String Subtraction

    1050 String Subtraction Given two strings S​1​​ and S​2​​, S=S​1​​−S​2​​ is defined to be the remain ...

  3. Linear Equations

    4.1 Linear Equations with One Independent Variable

  4. 数论入门——斐蜀定理与拓展欧几里得算法

    斐蜀定理 内容 斐蜀定理又叫贝祖定理,它的内容是这样的: 若$a,bin N$,那么对于任意x,y,方程$ax+by=gcd(a,b)*k(kin N)$一定有解,且一定有一组解使$ax+by=gcd ...

  5. 奇点云数据中台技术汇(三)| DataSimba系列之计算引擎篇

    随着移动互联网.云计算.物联网和大数据技术的广泛应用,现代社会已经迈入全新的大数据时代.数据的爆炸式增长以及价值的扩大化,将对企业未来的发展产生深远的影响,数据将成为企业的核心资产.如何处理大数据,挖 ...

  6. Part-Appium-1

    1.安装node > 下载二进制文件,解压后,配置到环境变量 https://nodejs.org/download/release/latest/ > vim ~/.bashrc,exp ...

  7. 系统学习 javaweb2----HTML语言2

    感想:学习javaweb之路,任重而道远. 学习笔记: 5.表格标签 5.1<table></table> 表格标签,用于效果中定义一个表格 5.2<tr>< ...

  8. TPO1-1 Groundwater

    If the pores are large,the water in them will exist as drops too heavy for surface tension to hold,a ...

  9. 会议信息|CNKI|AIAA|万方|AIP|CNKI|EI|CPCI|BP|INSPEC

    会议论文: 学术文献的三大支柱是期刊.专利和学位论文.会议论文是新的所以发文章快,灰色的,有些只有摘要,所以不容易获取. 有以下二次文献数据库,仅有摘要: CPCI BP:生物医学类 INSPEC在W ...

  10. Postman接口测试学习笔记

    1.postman界面 下载安装postman工具,以下是postman的界面 快捷区:提供常用的操作入口,新建请求,执行器,导入别人共享的收藏夹测试数据,包括运行收藏夹的一组测试数据: 侧边栏:搜索 ...