1735160940
2024-12-19 10:58:00
このチュートリアルでは、スタイリッシュな下線効果を備えたリンクを作成する方法を学びます。ユーザーがリンク上にマウスを移動すると、滑らかなアニメーションで線が表示されます。
このタイプの効果は、最新のインタラクティブなメニューやナビゲーション バーに最適です。
ステップ 1: HTML 構造
まず、メニューの単純な HTML 構造が必要です。使用される HTML コードは次のとおりです。
HTMLの説明 :
- メニューはタグ内に含まれています
クラスと一緒に
menu。 - 各メニュー項目は順序なしリスト (
), avec des éléments de liste ()。 - リンク (
) はタグにカプセル化されます。これにより、リンクの他の部分に影響を与えることなく、テキストに特定の効果を追加できます。
ステップ 2: CSS を使用してメニューのスタイルを設定する
次に、CSS 部分に移り、効果を実現しましょう。
1. メニュー構造のスタイルを設定する
.menu ul {
margin: 0;
padding-left: 0;
list-style: none;
display: flex;
}
.menu ul li a {
display: block;
padding: 1rem;
text-decoration: none;
}
.menu ul li a span {
position: relative;
padding-bottom: .7rem;
}
説明 :
.menu ul: デフォルトでマージンとパディングを削除し、リストから箇条書きを削除します (list-style: none) で要素を水平方向に整列させます。display: flex。.menu ul li a: リンクは、使用可能なすべてのスペースを占有します。display: blockアクセスしやすいようにパッドが入っています。.menu ul li a span: を追加しますpadding-bottom下線効果のためのスペースを確保し、疑似要素を配置するためにテキストに追加します。:afterとposition: relative。
2. 下線効果を作成する
.menu ul li a span:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
transform: translateX(-50%) scaleX(0);
width: 100%;
height: 2px;
background-color: #000;
transition: transform 250ms;
}
.menu ul li a:hover span:after {
transform: translateX(0%) scaleX(1);
}
説明 :
:after: アンダースコア線を表す擬似要素。position: absolute: テキストの下に行を配置します。transform: translateX(-50%) scaleX(0): デフォルトでは、線は水平方向の縮小効果で非表示になります。transition: transform 250ms: 250ms のスムーズなトランジションを追加します。
:hover:- ユーザーがリンク上にマウスを移動すると、水平方向に伸びて線が表示されます。
scaleX(1)。
- ユーザーがリンク上にマウスを移動すると、水平方向に伸びて線が表示されます。
ステップ 3: 最終結果
HTML と CSS を適用した後の結果は次のとおりです。
- シンプルでおしゃれなメニューです。
- ユーザーがリンク上にマウスを移動すると、滑らかなアニメーションで線が表示されます。
考えられる改善点
- カスタムカラー : で線の色を変更できます。
background-colorあなたのデザインに合わせて。 - 線の太さ : の値を変更します。
heightで:after細い線にも太い線にも。 - アニメーションの長さ : 調整する
transition: transform 250msエフェクトを加速または減速します。 - 中心から端までトレースする : 線が中央から端に向かって伸びるようにアニメーションを変更できます。この効果の CSS を調整する方法は次のとおりです。
.menu ul li a span:after { content: ''; position: absolute; left: 50%; /* Positionnement initial au centre */ bottom: 0; transform: translateX(-50%) scaleX(0); width: 100%; height: 2px; background-color: #000; transition: transform 250ms; } .menu ul li a:hover span:after { transform: translateX(-50%) scaleX(1); }説明:
- の
left: 50%行をテキストの下に水平方向に中央揃えします。 transform: translateX(-50%)行の中心がテキストと位置合わせされたままになります。- 値を増やすことで
scaleX(0)もっているscaleX(1)ホバーすると、追加の変更を必要とせずに、アニメーションが自然に中心から始まります。
この変更により、テキストの中心から端まで線が「はじけた」ように見える効果が得られ、さらに洗練された視覚的なタッチが追加されます。
- の
結論
このチュートリアルでは、HTML と CSS のみを使用して、リンクにインタラクティブでスタイリッシュな下線効果を作成する方法を示します。この効果は軽くて高速で、メニューをより動的にすることでユーザー エクスペリエンスが向上します。プロジェクトに追加すると、モダンでプロフェッショナルなナビゲーションが実現します。
#CSS #でアニメーションの下線効果を備えたリンクを作成する
