先来看一下效果:

1、基本效果就是这样的 ,鼠标悬停,下划线划入。鼠标离开,下划线划出

2、下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长。从右侧划入,下划线由又往左伸长

实现思路

1、导航是由ul+li组成的,在这里显然li 的宽度是不固定的。所以,我们可能需要从 li 本身的宽度上做文章,

既然每个 li 的宽度不一定,那么它对应的下划线的长度,肯定是是要和他本身相适应的。所以 ,我们可以在li  hover  的时候,借助伪元素。将下划线作用到每个 li 的伪元素身上。

2、怎么样实现一个过渡效果的动画呢?我们可以利用相对定位+决定定位,当li  hover 的时候,下划线要从一侧运动展开。

所以,我们利用绝对定位,将 li 的伪元素的宽度设置为0,在 hover 的时候,宽度从 width: 0 -> width: 100%,OK 完美

3、左移左出,右移右出的问题怎么解决

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

我们迫切需要一种方法,能够不改变当前 hover 的 li 的下划线移动方式却能改变它下一个 li 的下划线的移动方式(好绕口)。

这里我们可以借助 ~ 选择符,完成这个艰难的使命,对于当前 hover 的 li ,其对应伪元素的下划线的定位是 left: 100%,而对于 li:hover ~ li::before,它们的定位是 left: 0

示例代码:

1、结构html部分:

<ul>
<li>奇妙的CSS</li>
<li>导航栏</li>
<li>前端</li>
<li>CSS3</li>
<li>Javascript</li>
</ul>

2、css部分

ul {
display: flex;
position: absolute;
width: 800px;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
li {
position: relative;
padding: 20px;
font-size: 24px;
color: #000;
line-height:;
transition: 0.2s all linear;
cursor: pointer;
list-style: none;
} li::before {
content: "";
position: absolute;
top:;
left: 100%;
width:;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
} li:hover::before {
width: 100%;
top:;
left:;
transition-delay: 0.1s;
border-bottom-color: #000;
z-index: -1;
}
li:hover ~ li::before {
left:;
} li:active {
background: #000;
color: #fff;
}

这就是css3之魅力

奇妙的CSS3—导航栏下划线跟随效果的更多相关文章

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

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

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

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

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

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

  4. CSSTab栏下划线跟随效果

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

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

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

  6. 纯css导航栏下划线

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

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

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

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

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

  9. day24—JavaScript实现导航栏底部引线跟随移动

    转行学开发,代码100天——2018-04-09 前面的学习笔记中记录过,利用:before和:after实现导航栏鼠标移动跟随效果,今天通过JavaScript代码实现同样的效果,以作对比. < ...

随机推荐

  1. MyBatis缓存通俗易懂

    1.1     mybatis缓存介绍 如下图,是mybatis一级缓存和二级缓存的区别图解: Mybatis一级缓存的作用域是同一个SqlSession,在同一个sqlSession中两次执行相同的 ...

  2. CakePHP调用model类和foreach循环

    1. 引入Model类 2.调用model类(Guarantee)下的getCity()方法 3.写sql语句 并返回获得值 4.foreach循环取得的城市

  3. 零基础学python习题 - 进入python的世界

    1. python拥有以下特性:面向对象的特性.动态性.内置的数据结构.简单性.健壮性.跨平台性.可扩展性.强类型语言.应用广泛 2. python 需要  编译 3. 以下不属于python内置数据 ...

  4. Angular中引入Bootstrap部分样式失效以及Jquery的$无法识别

    大多数同学在模仿慕课网的时候可能会遇到引入bootstrap和jquery样式部分失效以及$符号报错,这里为大家提供正确的解决方案. 可能大家在引入试过col-md之后觉得bootstrap是ok的, ...

  5. CodeChef SADPAIRS:Chef and Sad Pairs

    vjudge 首先显然要建立圆方树 对于每一种点建立虚树,考虑这一种点贡献,对于虚树上已经有的点就直接算 否则对虚树上的一条边 \((u, v)\),\(u\) 为父亲,假设上面连通块大小为 \(x\ ...

  6. [转]运用@media实现网页自适应中的几个关键分辨率

    转自百度经验:http://jingyan.baidu.com/article/6f2f55a1ab36c3b5b83e6c46.html 经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用 ...

  7. RHEL5.X 重启网卡出现./network-functions: line 78: .: ifcfg-eth0: file not found

    错误信息: 红帽RHEL5.5系统,重启网卡报错 [root@localhost network-scripts]# service network restart Shutting down int ...

  8. 【VS2012】F5不能自动编译新修改

    VS2012正常使用时,如果文件有修改,按F5运行时,会自动对修改的文件进行重新编译.今天遇到的情况却并没有.度娘了下,网上有相同的问题,解决办法是“工具->选项->项目和解决方案-> ...

  9. Pig集群安装

    1.安装hadoop 这个之前已经写过 2.下载Pig,解压 3.保证Java和Hadoop已经在/etc/profile中配置 4.配置Pig安装目录 export PIG_INSTALL=/hom ...

  10. Android知识点滴

    今天,把新作的布局状态魅族机上进行测试 发现了一个BUG,造成闪退. 看了下log,一个布局造成的. 开始分析这个布局造成这个问题的原因. 开始艰难的调试过程. 代码注释大法,发现这个问题是一个tex ...