原文：一個HTML 導航欄下划線跟隨效果
這幾日學習html，一直在B站亂逛，發現網站的動效做的真好。然后翻到了這一頁： 點此查看 上面的導航欄是一個下划線跟隨的效果。由於有一個初始的選項 當前頁面對應標簽保持藍色 ，鼠標划過時除了高亮項下面的下划線也要跟隨。如果只實現前面這些效果可以用css完成，但是其實這里面的下划線是一個動畫效果，仔細觀察發現下划線相當於在border bottom上面做水平運動，切換標簽時有一個過渡效果，因此實際上 ...
2018-10-08 01:32 0 3122 推薦指數：
相關推薦
就像上圖這樣的動畫效果 在導航欄里的時候，下划線跟隨鼠標移動，鼠標移出導航欄時，下划線回到初始位置，同時要適應導航的寬度 為了適應導航的寬度，就不能給導航元素設置 margin，然后將導航元素的 clientWidth 設置給下划線 然后需要讓下划線獨立於導航之外，從而保證它的無縫 ...
先來看一下效果： 1、基本效果就是這樣的 ，鼠標懸停，下划線划入。鼠標離開，下划線划出 2、下划線的划入是有方向的，從左側划入懸停，下划線由左向右伸長。從右側划入，下划線由又往左伸長 實現思路 1、導航是由ul+li組成的，在這里顯然li 的寬度是不固定 ...
神奇的 ~ 選擇符 對於當前 hover 的 li ，其對應偽元素的下划線的定位是 left: 100%，而對於 li:hover ~ li::before，它們的定位是 left: 0。 ul li { float: left; width: 20 ...
先上張圖，如何使用純 CSS 制作如下效果？ 在繼續閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不借助 JS ，能否巧妙的實現上述效果。 OK，繼續。這個效果是我在業務開發的過程中遇到的一個類似的小問題。其實即便讓我借助 ...
先上張圖，如何使用純 CSS 制作如下效果？ 在繼續閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不借助 JS ，能否巧妙的實現上述效果。 OK，繼續。這個效果是我在業務開發的過程中遇到的一個類似的小問題。其實即便讓我借助 Javascript ，我的第一反應也是 ...
<ins>即下划線標簽 但是通常來講，不要給普通文本加下划線，因為用戶會誤以為是一個超鏈 ...