はじめに
この実験では、CSSを使ってホバー時に下線が表示されるアニメーションを作成する方法を学びます。この効果は、テキストに視覚的な興味を加え、ウェブサイトのユーザー体験を向上させるために使用できます。この実験で示されている手順に従うことで、CSSを使って動的で魅力的なウェブコンテンツを作成する方法をより深く理解することができます。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、CSSを使ってホバー時に下線が表示されるアニメーションを作成する方法を学びます。この効果は、テキストに視覚的な興味を加え、ウェブサイトのユーザー体験を向上させるために使用できます。この実験で示されている手順に従うことで、CSSを使って動的で魅力的なウェブコンテンツを作成する方法をより深く理解することができます。
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でさらに多くの実験を行って練習してください。