ホームページ  >  記事  >  ウェブフロントエンド  >  css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)

css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)

奋力向前
奋力向前オリジナル
2021-08-31 16:53:415202ブラウズ

前回の記事「css3を使ってフォントに立体感を与える方法を教えます(コード付き)」では、css3を使ってフォントに立体感を与える方法を紹介しました。 。次の記事では、CSS3 を使用してクールなナビゲーション バー効果を作成する方法を紹介しますので、一緒に見てみましょう。

css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)

#クールなナビゲーション バー効果は次のとおりです。

css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)

クールなナビゲーション バー効果を作成する CSS3 メソッド

1. 新しい HTML ファイルを作成します。まず

div タグを記述し、

    と入力して、このスタイル項目を呼び出します。これは、 Web サイトの CSS。内部のコンテンツを編集できます。class はクラス セレクターであり、Web ページのフォントの色を純粋に静的に制御できます。 コード例

    <div>
    <ul>
        <li><a href="#">首页</a></li>
    <li><a href="#">图片</a></li>
    <li><a href="#">视频</a></li>
    <li><a href="#">地图</a></li>
    <li><a href="#">游戏</a></li>
    <li><a href="#">关于</a></li>
    </ul>
    </div>

    コードの効果

    css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)

    2. ナビゲーション バーの特殊効果 CSS グローバル設定を設定するには、head の間に追加します。

    style css=”text/cssString コードを記述し、style タグに外側マージン、内側マージン、段落設定フォントを記述し、height を定義します。 height as 2000px.

    コード例

    body{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    height: 2000px;
     
    }

    3. 次に、ナビゲーション バーに背景を追加し、背景色、高さ、幅の設定を

    に入力します。 nav.

    コード例

    .nav{
    width: 100%;
    height: 100px;
    background-color: red;
    }

    コードの効果

    css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)

    4. 次に、ナビゲーション バーを上部に固定します。 page.

    コード例

    .item{
    position: fixed;
    top:50px;
    right:100px;
    margin: 0;
    padding: 0;
    display: flex;

    コードの効果

    css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)

    5. 画像がリスト内のリスト項目マークとして設定されます。

    ##コード例

    .item li{
    list-style: none;}

    6. 次に、相対位置、外側のマージン、内側のマージンを追加し、文字を大文字に変換し、色、太さ、

    アンダーライン

    テキストの下に線を定義します。 コード例

    .item li a{
    position: relative;
    display: block;
    padding: 10px 20px;
    margin: 20px 0;
    text-decoration: none;
    text-transform: uppercase;/*将字符转为大写*/
    color: #262626;
    font-weight: bold;
    /* transition: 0.5s; */}

    7. ホバーマウスポインターのフローティングスタイルを使用する

    }
    .item li a:hover{
    color:#fff;
    }

    コードの効果


    css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)8. ナビゲーション バーにエッジ設定を追加し、

    transition

    属性を使用してトランジション効果の時間を設定し、transgorm を使用して境界線を 2 倍にし、# を使用します。 ##opacity余白は表示されません。 コード例

    .item li a:before{
    
    content:&#39;&#39;;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    transform: scaleY(2);/*拉长边框两倍*/
    opacity: 0;/*边距不显示*/
    transition: 0.5s;
    z-index: -1;
    }
    .item li a:hover:before{
    transform: scaleY(1);/*拉长边框两倍*/
    opacity:1;
     
    }
    .item li a:after{
    content:&#39;&#39;;
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transform: scale(0);
    transition: 0.5s;
    z-index: -1;

    9. 最後の設定、

    hover

    マウスオーバーして色を黒に変更して追加します。回転とスケーリング。

    コード例

    .item li a:hover:after{ 
    transform: scale(1);}

    ok、HTML CSS編集コードが完成しました。

    推奨学習:

    CSS3ビデオチュートリアル

以上がcss3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。