ホームページ >ウェブフロントエンド >jsチュートリアル >✨ Glassmorphism とネオン効果でドロップダウン メニューを変身させましょう! ✨
✨ Glassmorphism とネオン効果でドロップダウン メニューを変身させましょう! ✨
- Linda Hamiltonオリジナル
- 2024-12-10 08:42:151013ブラウズ
<!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 サイトの他の関連記事を参照してください。
css ajax html Filter pointer href display position overflow margin padding border viewport background transform transition column flex li https
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。