✨ Glassmorphism とネオン効果でドロップダウンメニューを変身させましょう! ✨-jsチュートリアル-php.cn

✨ Glassmorphism とネオン効果でドロップダウンメニューを変身させましょう! ✨

Linda Hamilton

リリース： 2024-12-10 08:42:15

オリジナル

1037 人が閲覧しました

✨ Transform Your Dropdown Menu with Glassmorphism & Neon Effects! ✨

<!DOCTYPE html>
<html lang="ja">

  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=device-width、initial-scale=1.0">
  <title>ネオン グラスモーフィズム ドロップダウン</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  
    /* グローバル スタイル */
    体 {
      マージン: 0;
      高さ: 100vh;
      ディスプレイ: フレックス;
      整列項目: 中央;
      コンテンツの位置揃え: 中央;
      背景: 線形グラデーション(135度、#0f0f0f、#1a1a1a);
      フォントファミリー: 'Arial'、サンセリフ;
      色: #fff;
    }

    /* ドロップダウン コンテナ */
    。落ちる {
      位置: 相対的;
      表示: インラインブロック;
      背景: rgba(255, 255, 255, 0.1);
      境界半径: 12px;
      背景フィルター: ぼかし(15px);
      パディング: 20px;
      ボックスシャドウ: 0 8px 20px rgba(255, 255, 255, 0.1);
      トランジション: ボックスシャドウ 0.3 秒イーズ、背景 0.3 秒イーズ。
    }

    .dropdown:ホバー {
      背景: rgba(255, 255, 255, 0.2);
      ボックスシャドウ: 0 8px 30px rgba(255, 255, 255, 0.2);
    }

    .ドロップダウンボタン {
      パディング: 15 ピクセル 20 ピクセル;
      フォントサイズ: 16px;
      境界線: なし。
      境界半径: 8px;
      色: 白;
      カーソル: ポインタ;
      概要: なし。
      ディスプレイ: フレックス;
      整列項目: 中央;
      コンテンツの位置揃え: 間のスペース;
      背景: rgba(255, 255, 255, 0.1);
      背景フィルター: ぼかし(10px);
      ボックスシャドウ: 0 5px 15px rgba(0, 0, 0, 0.3);
      トランジション: 背景 0.3 秒イーズ、ボックスシャドウ 0.3 秒イーズ。
    }

    .dropdown-btn:hover {
      背景: rgba(255, 255, 255, 0.2);
      ボックスシャドウ: 0 5px 20px rgba(255, 255, 255, 0.5);
    }

    /* ドロップダウン メニュー */
    .dropdown-menu {
      位置: 絶対;
      上: 70ピクセル;
      左: 0;
      幅: 260ピクセル;
      背景: rgba(255, 255, 255, 0.1);
      境界半径: 12px;
      ボックスシャドウ: 0 10px 30px rgba(0, 0, 0, 0.5);
      背景フィルター: ぼかし(15px);
      パディング: 10px;
      表示: なし。
      フレックス方向: 列;
    }

    .dropdown:hover .dropdown-menu {
      ディスプレイ: フレックス;
    }

    .dropdown-menu li {
      リストスタイル: なし;
      パディング: 12px 15px;
      ディスプレイ: フレックス;
      整列項目: 中央;
      ギャップ: 10px;
      カーソル: ポインタ;
      色: #fff;
      境界半径: 8px;
      オーバーフロー: 非表示;
      トランジション: 背景 0.3 秒のイーズ、ボックスシャドウ 0.3 秒のイーズ、カラー 0.3 秒のイーズ。
    }

    /* アイコンとテキスト */
    .dropdown-menu li i {
      フォントサイズ: 24px;
      トランジション: カラー 0.3 秒の容易さ。
    }

    .dropdown-menu リ スパン {
      フォントサイズ: 16px;
      トランジション: カラー 0.3 秒の容易さ。
    }

    /* ホバー効果 */
    .dropdown-menu li:hover {
      背景: 線形グラデーション(135度, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
      ボックスシャドウ: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 25px rgba(255, 0, 255, 0.4);
      色: #fff;
    }.dropdown-menu li:hover i {
      色: #0ff; /* ネオンシアン */
    }

    .dropdown-menu li:ホバースパン {
      色: #f0f; /* ネオンマゼンタ */
    }
  </スタイル>
</head>

  <div>




          </div>

ログイン後にコピー

以上が✨ Glassmorphism とネオン効果でドロップダウンメニューを変身させましょう! ✨の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。