CSS を使用して左から右へのアニメーション下線を作成し、ホバー時に反転するにはどうすればよいですか?

下線のアニメーション: 左から右

uber.design のトランジション エフェクトを複製する際の課題は、ホバー時のトランジションを反転することにあります。提供されている CSS は下線を左から右にアニメーション化できますが、アニメーションを反転する機能がありません。

目的の効果を実現するには、グラデーションと背景の配置を組み合わせて利用できます。要素に線形グラデーションを適用し、背景の位置を遅延させて調整することで、下線が左から右に広がっているような錯覚を作り出すことができます。

修正された CSS は次のとおりです:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

このコードは要素に線形グラデーションを作成し、最初は左下 (0% 100%) に配置します。ホバーすると、背景の位置が右下 (100% 100%) に変更され、グラデーションによって要素の幅が拡大され、下線が左から右に移動する効果が作成されます。

細かい設定に- アニメーションを調整し、目的の効果に合わせて背景サイズとトランジション期間の値を調整します。

以上がCSS を使用して左から右へのアニメーション下線を作成し、ホバー時に反転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。