懸停效果：懸停時展開底部邊框
在追求創建視覺吸引力的網站時，您可能會遇到需要添加互動對您的元素產生懸停效果。可以增強您的設計的一個特殊效果是在懸停時擴展底部邊框。
要實現此效果，您可以利用 CSS 的 transform:scaleX() 屬性。透過在懸停時將scaleX屬性從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);
}但是，如果你想從左或右擴展邊框，你可以修改transform-origin屬性為如下：
h1.fromRight:after {
transform-origin: 100% 50%;
}
h1.fromLeft:after {
transform-origin: 0% 50%;
}此程式碼建立一個偽元素來應用邊框和過渡，防止文字本身過渡並維護HTML 的語義結構。
透過實現這些技術，您可以為邊框添加動態且具有視覺吸引力的懸停效果，從而增強用戶體驗並使您的網站脫穎而出。
以上是如何用 CSS 建立擴充底部邊框懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
