如何創建底部邊框擴展的懸停效果？

懸停時展開底部邊框

在這個問題中，目標是創建一個懸停效果，當遊標懸停在元素上時，底部邊框會展開。提供的程式碼片段使用具有不透明度過渡的偽元素來顯示懸停時的邊框。

解：

為了達到所需的效果，我們可以使用 CSS 轉換：scaleX() 擴大邊框而不是不透明度。它的工作原理如下：

1. 創建一個帶有底部邊框的偽元素：

   h1:after {
     position: absolute;
     left: 0;
     content: '';
     height: 40px;
     width: 275px;
     border-bottom: solid 3px #019fb6;
   }

   登入後複製

2. 應用帶有過渡的scaleX( )變換:

   h1:after {
     ...
     transform: scaleX(0);
     transition: transform 250ms ease-in-out;
   }

   登入後複製

3. 透過將scaleX設定為1來擴充懸停時的邊框：

   h1:hover:after {
     transform: scaleX(1);
   }

   登入後複製

擴充方向的修改：

1. 從中心擴展：

   h1:after {
     ...
     transform-origin: 50% 50%;
   }

   登入後複製

2. 從右側展開：

   h1:after {
     ...
     transform-origin: 100% 50%;
   }

   登入後複製

3. 從左側展開：

   h1:after {
     ...
     transform-origin: 0% 50%;
   }

   登入後複製

以上是如何創建底部邊框擴展的懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！