動畫底線：從左到右
複製 uber.design 的過渡效果的挑戰在於反轉懸停時的過渡。雖然提供的 CSS 可以從左到右對下劃線進行動畫處理，但它缺乏反轉動畫的能力。
為了達到所需的效果，我們可以利用漸層和背景定位的組合。透過對元素應用線性漸變並延遲調整背景位置，我們可以創建下劃線從左向右擴展的錯覺。
這是修改後的 CSS：
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: 0 100%; /*OR bottom left*/
background-size: 0% 2px;
background-repeat: no-repeat;
transition:
background-size 0.3s,
background-position 0s 0.3s; /*change after the size immediately*/
}
.un:hover {
background-position: 100% 100%; /*OR bottom right*/
background-size: 100% 2px;
}此程式碼在元素上建立線性漸變，最初位於左下角（0% 100%）。懸停時，背景位置改為右下角（100% 100%），導致漸變擴大元素的寬度，從而產生下劃線從左向右移動的效果。
要罰款-調整動畫，調整背景大小和過渡持續時間的值以適應您想要的效果。
以上是如何使用 CSS 創建從左到右的動畫下劃線並在懸停時反轉它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
