ホバー時に境界線の下部のアニメーション展開を作成するにはどうすればよいですか?

ホバー効果: 境界線の下端のアニメーションによる拡張

この質問の目的は、ホバー時に要素の下端の境界線を拡張するホバー効果を作成することです。この効果を実現するには、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 中国語 Web サイトの他の関連記事を参照してください。