HTML CSS および JS コードを使用した Navbar アイコン オプション ui/ux

    
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>モバイルスライダー</title>
    
        体 {
            マージン: 0;
            パディング: 0;
            フォントファミリー: Arial、サンセリフ;
            ディスプレイ: フレックス;
            コンテンツの位置揃え: 中央;
            整列項目: 中央;
            高さ: 100vh;
            背景: 線形グラデーション(下へ、#1a1a2e、#16213e);
            色: 白;
        }

        .slider-container {
            ディスプレイ: フレックス;
            フレックスラップ: ラップ;
            ギャップ: 10px;
            幅: 500ピクセル;
            コンテンツの位置揃え: 均等なスペース;
            整列項目: 中央;
        }

        .slider-item {
            ディスプレイ: フレックス;
            フレックス方向: 列;
            整列項目: 中央;
            コンテンツの位置揃え: 中央;
            位置: 相対的;
            幅: 80ピクセル;
            高さ: 80ピクセル;
            背景: #1f4068;
            境界半径: 50%;
            トランジション: トランスフォーム 0.3 秒イーズ、ボックスシャドウ 0.3 秒イーズ、背景 0.3 秒イーズ。
            ボックスシャドウ: 0 4px 6px rgba(0, 0, 0, 0.2);
            カーソル: ポインタ;
        }

        .slider-item:ホバー {
            変換: スケール(1.1);
            ボックスシャドウ: 0 6px 10px rgba(0, 0, 0, 0.3);
        }

        .slider-item.active {
            背景: 線形グラデーション(右へ、#ff7e5f、#feb47b); /* アクティブな魅力的なグラデーション */
            変換: スケール(1.2); /* やや大きめのサイズ */
            ボックスシャドウ: 0 8px 12px rgba(255, 126, 95, 0.5);
        }

        .slider-item i {
            フォントサイズ: 28px;
            色: 白;
        }

        .slider-item スパン {
            マージントップ: 8px;
            /* フォントサイズ: 8px; */
            色: 白;
            テキスト整列: 中央;
        }

        .label {
            フォントサイズ: 12px;
            左マージン: 15px;
            色: 白;
            マージントップ: 10px;
        }
    スタイル>
    


    <div>




          </div>

            
        

以上がHTML CSS および JS コードを使用した Navbar アイコン オプション ui/uxの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。