下枠が拡大するホバー効果を作成するには?

カーソルを合わせたときに下枠を拡張する

この質問の目的は、カーソルが要素上にあるときに下枠が拡張するホバー効果を作成することです。提供されているコード スニペットでは、不透明度の遷移を持つ疑似要素を使用して、ホバー時に境界線を表示します。

解決策:

目的の効果を実現するには、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);
   }

拡張方向の変更:

さらに、疑似要素のtransform-originプロパティを調整して境界線の拡張方向を指定します:

1. 中心から拡張するには:

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

2. 右から展開するには:

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

3. 展開するには左から:

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

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