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

素晴らしい 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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  クリエイティブな会社概要ウェブページデザイン

>>:  HTML と埋め込み Flash の両方におけるスクロールバーの分析と処理

推薦する

LinuxのバックグラウンドでPythonプログラムを実行するいくつかの方法

1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...

Windows 環境に mysql-8.0.11-winx64 をインストールする際に発生する問題を解決する

MySQL インストール パッケージをダウンロードします。mysql-8.0.11-winx64 を...

goaccess を使用して nginx ログを分析する詳細な方法

最近、goaccess を使って nginx ログを分析したいのですが、nginx ログの設定形式が...

Linux ディスク領域解放問題の概要

IDC のサーバーの /partition 使用率がいっぱいです。 100% に到達しました!確認し...

分散ロックの原理と3つの実装方法の詳細な説明

現在、ほぼすべての大規模な Web サイトとアプリケーションは分散方式で展開されています。分散シナリ...

CSS3 で Taobao に空白スペースを実装する方法

Taobao用の空白スペースを作成します。 ブラウザページを縮小すると、コンテンツ領域は縮小されませ...

Linux でジャンクファイルをエレガントに削除する方法

あなたも私と同じように、コンピューターのファイルを整然と整理し、不要なファイルを適宜削除するプログラ...

MySQL で 2 つのセットの交差/差/和を取得する方法

MySQL の一般的なシナリオ: 2 つのデータ セットの交差と差を取得するステップ1. 2つのコレ...

Vueはテーマ切り替えのための複数のアイデアを実装します

目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...

sqlite を mysql スクリプトに移行する方法

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...

ウェブサイトに最も必要なのは、ターゲットユーザーグループのエクスペリエンスを向上させることです。

「大河は東に流れ、波は歴代の英雄たちを洗い流した。古城の西側は三国時代の周朗の赤壁だと言われている...

Linux でユーザー アカウントをロックおよびロック解除する 3 つの方法

組織内で何らかのパスワード ポリシーがすでに実装されている場合は、この記事を読む必要はありません。た...

一般的でない js 演算演算子の概要

目次2. カンマ演算子3. JavaScript Null 結合演算子 (??) 4. JavaSc...

Vue のローカルコンポーネントの紹介

Vueでは、ローカルコンポーネントを自分で定義(登録)することができます。コンポーネント名を定義する...

Ubuntu 18.04 が VMware 仮想マシンでネットワークに接続できない問題の解決策

仮想マシン内のUbuntu 18.04がネットワークに接続できない問題の解決策は次のとおりですVMw...