CSS を使用して下枠の拡大ホバー効果を作成する方法

ホバー効果: ホバー時に下枠を拡大する

視覚的に魅力的な Web サイトを作成しようとすると、インタラクティブな機能を追加する必要が生じる場合があります。要素にホバー効果を加えます。デザインを強化できる特別な効果の 1 つは、ホバー時に下の境界線を拡大することです。

この効果を実現するには、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 のセマンティック構造を移行および維持することを防ぎます。

これらのテクニックを実装すると、動的で視覚的に魅力的なホバー効果を境界線に追加して、ユーザー エクスペリエンスを向上させ、Web サイトを目立たせることができます。

以上がCSS を使用して下枠の拡大ホバー効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。