素晴らしい CSS ナビゲーション バーの下線効果

中国初のカッター github.com/chokcoco

まず、ここに画像があります。純粋な CSS を使用して次の効果を作成するにはどうすればよいでしょうか?

読み続ける前に、少し時間を取ってください。上記の効果について考えたり、自分で試してみたりして、JS の助けを借りずに上記の効果を巧みに実現できるかどうかを確認してください。

はい、続けます。この影響は、私がビジネス開発の過程で遭遇した同様の小さな問題です。実際、Javascript を使うように言われたとしても、私の第一反応は「とても面倒だ」ということになるでしょう。そこで、CSS のみを使用してこの効果を実現することは可能かどうか疑問に思いました。

要件の定義

次の要件を持つ簡単なルールを定義しましょう。

HTML 構造が次のようになっていると仮定します。

<ul>
  <li>素晴らしい CSS</li>
  <li>ナビゲーション バー</li>
  <li>カーソルの小さな下線が続きます</li>
  <li>純粋な CSS</li>
  <li>ナビゲーションの下線</li>
</ul>

• ナビゲーションliの幅は固定されていません
• ナビゲーションのliからliへ移動すると、下線が左から右へ移動します。同様に、ナビゲーションの右のliから左のliに移動すると、下線は右から左に移動します。

実現要件

最初にこの効果を見たとき、次のアニメーションは CSS だけでは実現不可能だと感じました。

CSS のみで実現したい場合は、別の方法を見つけて、いくつかのトリッキーな方法を使用するしかありません。

さて、いくつかのトリックと CSS を使用して、この効果を段階的に実現してみましょう。困難を分析する:

幅は固定されていない

最初の難点は、 liの幅が固定されていないことです。したがって、 li要素自体の幅を調整する必要があるかもしれません。

各liの幅は固定されていないため、対応する下線の長さはそれに応じて調整する必要があります。当然、 border-bottom使用を検討します。

li {
    下境界線: 2pxsolid#000;
}

つまり、今は次のようになります (li は互いに接続され、li 間のギャップはpaddingを使用して作成されます)。

もちろん、最初はアンダースコアがないので、それを非表示にする必要があるかもしれません。

li {
    下境界線: 0pxsolid#000;
}

疑似要素でやり直す

これは機能していないようです。非表示にした後、 liホバーすると下線のアニメーションが必要になり、 li自体は移動できないからです。そこで、疑似要素の使用を検討します。各li疑似要素に下線を適用します。

li::before {
    コンテンツ： "";
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 100%;
    高さ: 100%;
    下境界線: 2pxsolid#000;
}

アニメーションの最初のステップを考えてみましょう。マウスをホバーすると、下線が移動して片側から拡大します。したがって、絶対位置指定を使用して、 li疑似要素の幅を 0 に設定します。ホバーすると、幅はwidth: 0 -> width: 100%に変わります。CSS は次のとおりです。

li::before {
    コンテンツ： "";
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 0;
    高さ: 100%;
    下境界線: 2pxsolid#000;
}

li:hover::before {
    幅: 100%;
}

以下の結果が得られます。

よし、成功に一歩近づいたような気がする。今、私たちは最も難しい問題に取り組まなければなりません。

ナビゲーションの左のli li移動すると、下線が左から右に移動するように、線をカーソルの動きに合わせて移動させる方法。同様に、ナビゲーションの右のliから左のliに移動すると、下線は右から左に移動します。

現在の効果を詳しく見てみましょう。

最初のliから 2 番目のliに切り替えるときに、最初のli下線の引き込み方向が正しくありません。したがって、下線の初期位置をシフトしてleft: 100%に設定し、下線が引き込まれるたびに最初のliが正しくなるようにする必要があります。

li::before {
    コンテンツ： "";
    位置: 絶対;
    上: 0;
    左: 100%;
    幅: 0;
    高さ: 100%;
    下境界線: 2pxsolid#000;
}

li:hover::before {
    左: 0;
    幅: 100%;
}

効果をご覧ください:

さて、2 枚の写真を注意深く比較すると、2 番目の効果は実際にはゴマを拾い、スイカを失うことです。最初のliの方向は正しいですが、2 番目のliの下線の方向が間違っています。

したがって、現在のホバーliの下線の移動モードを変更せずに (非常に混乱を招く)、次のliの下線の移動モードを変更できる方法が緊急に必要です。

そうです、ここでは~セレクターを使用してこの難しいミッションを完了できます。これは、この例で最も重要な部分でもあります。

現在ホバーされているliの場合、対応する疑似要素の下線の位置はleft: 100%ですが、 li:hover ~ li::before場合、それらの位置はleft: 0です。 CSS コードは次のとおりです。

li::before {
    コンテンツ： "";
    位置: 絶対;
    上: 0;
    左: 100%;
    幅: 0;
    高さ: 100%;
    下境界線: 2pxsolid#000;
    遷移: 0.2salllinear;
}

li:hover::before {
    幅: 100%;
    左: 0;
}

li:hover~li::before {
    左: 0;
}

この時点で、望んでいた効果が達成されました!花を撒きます。見てみましょう:

効果は良いですが、少し硬いです。イージング関数を適切に変更し、アニメーション遅延を追加することで、上記の効果を実現できます。もちろん、これらは単なる付加価値に過ぎません。

完全なデモは、こちらでご覧いただけます: CodePen --Demo

やっと

この方法の最大の欠点は、最初の li を入力するときに、行が右から左にしか進まないことです。これを除けば、次の効果は非常にうまく達成できます。

長い間更新していませんでした。最近は、イーサリアムプログラミング、スマートコントラクトの記述など、ブロックチェーン関連の技術の学習に夢中になっています。今後も自分の分野にもっと力を入れ、フロントエンドの記事をもっと書いていきたいと思います。CSS の魅力はまだまだ尽きません。

素晴らしい CSS 技術記事が私の Github -- iCSS に集められています。これらは継続的に更新されています。星をクリックして購読し、収集してください。

要約する

上記は、私が紹介した素晴らしい CSS ナビゲーション バーの下線付き効果です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!