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

先來看一下效果：

一、基本效果就是這樣的 ，鼠標懸停，下劃線劃入。鼠標離開，下劃線劃出

二、下劃線的劃入是有方向的，從左側劃入懸停，下劃線由左向右伸長。從右側劃入，下劃線由又往左伸長

實現思路

一、導航是由ul+li組成的，在這裏顯然li 的寬度是不固定的。因此，咱們可能須要從 li 自己的寬度上作文章，

既然每一個 li 的寬度不必定，那麼它對應的下劃線的長度，確定是是要和他自己相適應的。因此 ，咱們能夠在li  hover  的時候，藉助僞元素。將下劃線做用到每一個 li 的僞元素身上。

二、怎麼樣實現一個過渡效果的動畫呢？咱們能夠利用相對定位+決定定位，當li  hover 的時候，下劃線要從一側運動展開。

因此，咱們利用絕對定位，將 li 的僞元素的寬度設置爲0，在 hover 的時候，寬度從 width: 0 -> width: 100%，OK 完美

三、左移左出，右移右出的問題怎麼解決

如何讓線條跟隨光標的移動動做，實現當從導航的左側 li 移向右側 li，下劃線從左往右移動。同理，當從導航的右側 li 移向左側 li，下劃線從右往左移動

咱們迫切須要一種方法，可以不改變當前 hover 的 li 的下劃線移動方式卻能改變它下一個 li 的下劃線的移動方式（好繞口）。

這裏咱們能夠藉助 ~ 選擇符，完成這個艱難的使命，對於當前 hover 的 li ，其對應僞元素的下劃線的定位是 left: 100%，而對於 li:hover ~ li::before，它們的定位是 left: 0

示例代碼：

一、結構html部分：

<ul>
    <li>奇妙的CSS</li>
    <li>導航欄</li>
    <li>前端</li>
    <li>CSS3</li>
    <li>Javascript</li>
</ul>

二、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之魅力