純粋な CSS を使用して特殊効果のナビゲーションバーを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

純粋な CSS を使用して特殊効果のナビゲーションバーを作成するにはどうすればよいですか?

青灯夜游

Oct 11, 2018 pm 05:43 PM

cssCSS特殊効果ナビゲーションバー

この記事では、純粋な CSS を使用して特殊効果のナビゲーションバーを作成する方法を紹介します。必要な方は参考にしていただければ幸いです。

まず写真を撮って、その効果を確認してください:

以下を読み続ける前に、少し時間を取ってください。 JS を使用せずに上記の効果を賢く実現できるかどうか、上記の効果について考えたり、自分で試してみたりしてください。

OK、続けてください。この影響は、私が事業開発の過程で遭遇した同様の小さな問題です。実際、JavaScript を使ってみても、最初は「めんどくさい」という感想を持ちます。それで、私はずっと疑問に思っていましたが、CSSだけを使用してこの効果を達成することは可能でしょうか？

要件を定義します

簡単なルールを定義します。要件は次のとおりです:

不可思议的CSS
导航栏
光标小下划线跟随
PURE CSS
Nav Underline

ナビゲーション列の li の幅は、修正済み
ナビゲーションの左liから右liに移動すると、下線が左から右に移動します。同様に、ナビゲーションの右liから左liに移動すると、下線が右から左に移動します。

実装要件

このエフェクトを初めて見たとき、次のアニメーションは CSS だけで完成させるのは不可能だと感じました。 CSS のみを使用して実装したい場合は、別の方法を見つけて、いくつかの賢い方法を使用する必要があります。それでは、いくつかのトリックを使用して、CSS を使用してこの効果を段階的に実現してみましょう。問題点を分析してください:

幅が固定されていません

最初の問題は、li の幅が固定されていないことです。したがって、li 自体の幅について大騒ぎする必要があるかもしれません。各 li の幅は必ずしも同じではないため、対応する下線の長さもそれに一致する必要があります。当然、その境界底を使用することを考えます。

li { border-bottom: 2px solid #000;}

つまり、現在は次のようになります (LI は互いに接続され、LI 間のギャップはパディングを使用して生成されます):

#もちろん、最初は下線がないので、隠す必要があるかもしれません。

li { border-bottom: 0px solid #000;}

ひっくり返して擬似要素を使用する

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

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #000;
}

以下の最初のステップのアニメーションを考慮してください。カーソルを置くと、下線が片側から移動して展開されます。したがって、絶対配置を使用して li の疑似要素の幅を 0 に設定します。ホバー時の幅は width: 0 -> width: 100% になります。CSS は次のとおりです。

左から左に移動、右から右に移動

OK、成功に一歩近づいた気がします。ここで、最も難しい質問が 1 つ残っています。

ナビゲーションの左のリから右のリに移動するときに、下線が左から右に移動するように、カーソルの動きに線を追従させるにはどうすればよいですか。。同様に、ナビゲーションの右liから左liに移動すると、下線が右から左に移動します。

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

最初の li から 2 番目の li に切り替えると、最初の li に下線が引かれます検索方向間違っています。したがって、おそらく、下線の初期位置をシフトして左に設定する必要があります: 100%。そうすれば、下線が引っ込められるたびに最初の li が正しくなります:

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
}
li:hover::before {
    width: 100%;
}

効果を見てください:

さて、2 つの写真を注意深く比較してください。2 番目の効果は、実際にゴマを拾い、スイカを失ったことです。 1番目のリの方向は正しいのですが、2番目のリの下線の移動方向がまた間違っています。

Magic~Selector

そこで、現在のホバーの下線の移動方法を変更せずに、次の li の下線の移動を変更できるメソッドが早急に必要です (なんて口うるさい)。

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

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

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
}
li:hover::before {
  left: 0;
  width: 100%;
}

この時点で、目的の効果が達成されています。花を散らします。見てください:

效果不错，就是有点僵硬，我们可以适当改变缓动函数以及加上一个动画延迟，就可以实现上述开头里的那个效果了。当然，这些都是锦上添花的点缀。（以上非原创，转自网络）

完整代码实例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        *{margin:0;padding:0;}
        a{text-decoration:none;color:#000;}
        ul{margin-top:100px;}
        li{float:left;list-style:none;padding:0 20px;cursor:pointer;position:relative;}
        li::before {
          content: "";
          position: absolute;
          top: 0;
          left: 100%;
          width: 0;
          height: 100%;
          border-bottom: 2px solid #4C7C9C;
          transition: 0.2s all linear;
          z-index:-1;
        }
        li:hover::before {
          width: 100%;
          left: 0;
        }
        li:hover ~ li::before {
          left: 0;
        }        
    </style>
    <body>
        <ul>
            <li><a href="http://www.baidu.com">11111</a></li>
            <li><a href="http://www.taobao.com">22222</a></li>
            <li><a href="http://www.sina.com">33333</a></li>
            <li><a href="http://www.jd.com">44444</a></li>
            <li><a href="http://www.360.com">55555</a></li>
        </ul>
    </body>
</html>

实际项目中若li里面有a标签出现不能点击的情况，注意检查伪类和li的层级关系，设置好各自z-index值。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程，更多相关教程请访问 CSS3视频教程！

更多炫酷CSS3、javascript特效代码，尽在：javascript特效大全

以上が純粋な CSS を使用して特殊効果のナビゲーションバーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか？Apr 18, 2025 am 11:34 AM

先日、この質問がありました。私の最初の考えは、奇妙な質問です！特異性はセレクターに関するものであり、アットレールはセレクターではないので、...無関係ですか？

@mediaと@supportのクエリをネストできますか？Apr 18, 2025 am 11:32 AM

はい、あなたはできます、そしてそれは本当にどの順序で重要ではありません。 CSSプリプロセッサは必要ありません。通常のCSSで動作します。

クイックガルプキャッシュバストApr 18, 2025 am 11:23 AM

CSSやJavaScript（および画像とフォントなど）などのアセットにファーアウトキャッシュヘッダーを確実に設定する必要があります。それはブラウザを伝えます

CSSの品質と複雑さを監視するスタックを探してApr 18, 2025 am 11:22 AM

多くの開発者は、CSSコードベースを維持する方法について書いていますが、そのコードベースの品質をどのように測定するかについて多くの人が書いていません。確かに、私たちは持っています

データリストは、値を強制せずに値を提案するためのものですApr 18, 2025 am 11:08 AM

短い任意のテキストを受け入れるために必要なフォームを持っていたことがありますか？名前などのように。それはまさにそのためのものです。たくさんあります

チューリッヒでのフロント会議Apr 18, 2025 am 11:03 AM

私は、フロント会議のためにスイスのチューリッヒに向かうことにとても興奮しています（その名前とURLが大好きです！）。私はこれまでスイスに行ったことがないので、興奮しています

CloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますApr 18, 2025 am 10:58 AM

ソフトウェア開発における私のお気に入りの開発の1つは、サーバーレスの出現です。詳細に行き詰まる傾向がある開発者として

NUXTアプリケーションで動的ルートを作成しますApr 18, 2025 am 10:53 AM

この投稿では、私が構築して展開して展開してネットライフを使用して、着信データの動的ルートを作成する方法を示すeコマースストアのデモを使用します。それはかなりです

See all articles

ホットAIツール

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。