奇妙的CSS3—導航欄下划線跟隨效果

先來看一下效果：

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: 1;
            transition: 0.2s all linear;
            cursor: pointer;
            list-style: none;
        }

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

 

這就是css3之魅力