如何在懸停時創建邊框底部的動畫擴充？

懸停效果：邊框底部的動畫擴展

在這個問題中，目標是創建一個懸停效果，在懸停時擴展元素的底部邊框。為了實現這種效果，我們可以利用transform屬性並在懸停時將其從0轉換為1。

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

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

這種方法使用偽元素將邊框轉換與文字分開，保留原始HTML結構。可以操作transform-origin屬性來從不同方向擴展邊框，如下所示：

<h1></h1>

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

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

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