CSS でアニメーション付きのホバー下線効果を作成する

はじめに

この実験では、CSS を使ってホバー時に下線が表示されるアニメーションを作成する方法を学びます。この効果は、テキストに視覚的な興味を加え、ウェブサイトのユーザー体験を向上させるために使用できます。この実験で示されている手順に従うことで、CSS を使って動的で魅力的なウェブコンテンツを作成する方法をより深く理解することができます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この中級レベルの実験の完了率は 77%です。学習者から 100% の好評価を得ています。

ホバー時の下線アニメーション

VM 内には既に index.html と style.css が用意されています。

ユーザーがテキストの上にホバーしたときにアニメーション付きの下線効果を作成するには、次の手順に従います。

display: inline-block を使用して、下線をテキストコンテンツの幅だけに広げます。
::after 疑似要素を使用して、width: 100% と position: absolute を設定して、コンテンツの下に配置します。
transform: scaleX(0) を使用して、初期状態で疑似要素を非表示にします。
:hover 疑似クラスセレクタを使用して、ホバー時に transform: scaleX(1) を適用して疑似要素を表示します。
transform-origin: left と適切な transition を使用して、transform をアニメーション化します。
要素の中央から変換が始まるように、transform-origin プロパティを削除します。

ここに、テキスト要素にこの効果を適用するための例の HTML コードがあります。

<p class="hover-underline-animation">Hover this text to see the effect!</p>

そして、対応する CSS コードはこちらです。

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはホバー時の下線アニメーションの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。