ホームページ >ウェブフロントエンド >jsチュートリアル >HTML CSS および JS コードを使用した Navbar アイコン オプション ui/ux
HTML CSS および JS コードを使用した Navbar アイコン オプション ui/ux
- Barbara Streisandオリジナル
- 2024-12-25 14:18:10236ブラウズ
<!DOCTYPE html>
<html lang="ja">
<メタ文字セット="UTF-8">
<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;
}
</スタイル>
<リンク rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<div>
</div>
以上がHTML CSS および JS コードを使用した Navbar アイコン オプション ui/uxの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
css ajax html for using pointer JS href display position margin padding border viewport background transform transition column flex https ux ui
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。