不可思议的纯CSS导航栏下划线跟随效果-蒲公英云

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

参考文章“不可思议的纯CSS导航栏下划线跟随效果”https://www.cnblogs.com/coco1s/p/8657192.html

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNzkyOA_size_16_color_FFFFFF_t_70

第一步：

效果

第二步：

#ul_ {
    width: 800px;
    background: #66AFE9;
}

效果：

在这里我不懂为什么要用width: 800px;因为没效果，宽度还是屏幕的100%（所以这里先不理）

加上display: flex;

效果：

百度一下display: flex;有什么用，display:flex 是一种弹性布局方式，可以应用于容器中，也可以应用于行内元素

不懂的话看下这三篇文章

https://www.cnblogs.com/xuyuntao/articles/6391728.html

https://www.cnblogs.com/qingchunshiguang/p/8011103.html

https://blog.csdn.net/u011300580/article/details/56011564

回到正题

加上position: absolute;

效果：

这时候width: 800px;效果出来了，如果我设置少一点，比如我设置100px，就会成这样

加上top: 50%；left: 50%;

效果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNzkyOA_size_16_color_FFFFFF_t_70 1

当使用：top: 50%;left: 50%;本来原点在左上角,这样设置可以使原点的位置在中间

加上transform: translate(-50%, -50%);

效果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNzkyOA_size_16_color_FFFFFF_t_70 2

比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动

所以transform: translate(-50%, -50%);的作用是往上（y轴）,左（x轴）移动自身高宽的 50%，以使其居于中心位置

整合一下

#ul_ {
    display: flex;           
    position: absolute;
    width: 800px;
    background: #66AFE9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

第三步：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNzkyOA_size_16_color_FFFFFF_t_70 3

#li_ {
    padding: 20px;
    font-size: 24px;
    color: #000;
    list-style: none;      
}

效果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNzkyOA_size_16_color_FFFFFF_t_70 4

加入line-height: 1;，至于这个怎么用我也不清楚，查了一篇文章（也没去看）https://blog.csdn.net/a2013126370/article/details/82786681

我只知道效果看起来好像紧凑了点

效果：

加上position: relative;，不知道有什么用

加上transition: 0.2s all linear;

当只有一个时间时，它是：过渡持续时间，而为默认值0

所以应该是（过渡持续时间，所有元素，匀速）（个人理解，不知道对不对）

参考文章：https://www.cnblogs.com/xiaohuochai/p/5347930.html

加上cursor: pointer;

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状，我这里显示是一个手掌

整合一下：

#li_ {
    position: relative;
    padding: 20px;
    font-size: 24px;
    color: #000;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer;
    list-style: none;
}

接下来

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNzkyOA_size_16_color_FFFFFF_t_70 5

#li_::before {
    content: "";
}

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制
比如content:”.”　就表示在需要的地方插入”.”

第一个难点， li 的宽度是不固定的。所以，我们可能需要从 li 本身的宽度上做文章。

既然每个 li 的宽度不一定，那么它对应的下划线的长度，肯定是是要和他本身相适应的。自然而然，我们就会想到使用它的 border-bottom 。借助伪元素，将下划线作用到每个 li 的伪元素之上。

加上border-bottom: 2px solid #000;

加上position: absolute;left: 100%;

百度了一下：

加上top: 0;height: 100%;（我也有点懵）

整合

#li_::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}

下面考虑第一步的动画，hover 的时候，下划线要从一侧运动展开。所以，我们利用绝对定位，将 li 的伪元素的宽度设置为0，在 hover 的时候，宽度从 width: 0 -> width: 100%

#li_:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    border-bottom-color: #000;
}

加上transition-delay: 0.1s;过渡的延迟时间

加上z-index: -1;

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

参考http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html

效果：

但是有个问题：就是无论我是左移还是右移，都会有这样的效果，比如左移，原来li会有横条向右移的感觉

左移左出，右移右出

https://www.cnblogs.com/coco1s/p/8657192.html参考文章

整合

#li_:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #000;
    z-index: -1;
}
#li_:hover ~ #li_::before {
    left: 0;
}
#li_:active {
    background: #000;
    color: #fff;
}