如何使用 CSS 創建從左到右的動畫下劃線並在懸停時反轉它？

動畫底線：從左到右

複製 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中文網其他相關文章！