ホームページ >ウェブフロントエンド >jsチュートリアル >HTML CSSとJavaScriptを使用したスマートスクリーンアニメーション
HTML CSSとJavaScriptを使用したスマートスクリーンアニメーション
- Linda Hamiltonオリジナル
- 2024-11-21 13:52:35870ブラウズ
<!DOCTYPE html>
<html lang="ja">
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>スマート スクリーン メニュー</title>
体 {
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;
高さ: 100vh;
背景色: #1c1c1e;
マージン: 0;
オーバーフロー: 非表示;
}
.menu-container {
位置: 相対的;
幅: 250ピクセル;
高さ: 250ピクセル;
}
.background-circle {
位置: 絶対;
トップ: 50%;
左: 50%。
変換: 変換(-50%, -50%) スケール(0);
幅: 200ピクセル;
高さ: 200ピクセル;
背景色: #ffffff30;
境界半径: 50%;
トランジション: トランスフォーム 0.4 秒イーズアウト。
}
.center-btn {
位置: 絶対;
トップ: 50%;
左: 50%。
変換: 変換(-50%, -50%);
幅: 60ピクセル;
高さ: 60ピクセル;
背景色: #009688; /* ティールカラー */
境界半径: 50%;
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;
色: #ffffff;
フォントサイズ: 24px;
カーソル: ポインタ;
トランジション: 変換 0.3 秒のイーズ、背景色のイーズ 0.3 秒。
}
.center-btn.open-icon::before {
コンテンツ： '？'; /* アイコンを展開します */
}
.center-btn.close-icon::before {
コンテンツ： '？'; /* アイコンを折りたたむ */
}
.center-btn:ホバー {
変換: 変換(-50%, -50%) スケール(1.1);
背景色: #00695c;
}
。オプション {
位置: 絶対;
トップ: 50%;
左: 50%。
変換: 変換(-50%, -50%) スケール(0);
幅: 50ピクセル;
高さ: 50ピクセル;
背景色: #2c2c2e;
境界半径: 50%;
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;
色: #aaa;
フォントサイズ: 18px;
カーソル: ポインタ;
不透明度: 0;
トランジション: すべて 0.4 秒の緩和。
}
.option.selected {
背景色: #ffdd59;
色: #000;
}
.option.selected::before {
コンテンツ： '';
位置: 絶対;
上: -15px;
表示: ブロック;
幅: 5px;
高さ: 5px;
背景色: #ffdd59;
境界半径: 50%;
}.option.selected::after {
コンテンツ： '';
位置: 絶対;
上: -8px;
幅: 15px;
高さ: 3px;
背景色: #ffdd59;
変換: 変換(-3px, 10px);
}
.option:ホバー {
背景色: #ffd93d;
色: #000;
}
/* 外側の円と中心からのアニメーション */
.menu-container.open .background-circle {
変換: 変換(-50%, -50%) スケール(1);
}
.menu-container.open .option {
不透明度: 1;
ポインターイベント: すべて;
}
/* アイコンの個々の位置 */
.brightness { 変換: 変換(-50%, -50%) 変換(-100px, 0); }
.wifi { 変換: 変換(-50%, -50%) 変換(-70px, -70px); }
.airplane { 変換: 変換(-50%, -50%) 変換(0, -100px); }
.bluetooth { 変換: 変換(-50%, -50%) 変換(70px, -70px); }
.flashlight { 変換: 変換(-50%, -50%) 変換(100px, 0); }
.location { 変換: 変換(-50%, -50%) 変換(70px, 70px); }
.dnd { 変換: 変換(-50%, -50%) 変換(0, 100px); }
.screenshot { 変換: 変換(-50%, -50%) 変換(-70px, 70px); }
.menu-container.open .brightness { 変換: 変換(-50%, -50%) 変換(-100px, 0) スケール(1); }
.menu-container.open .wifi { 変換: 変換(-50%, -50%) 変換(-70px, -70px) スケール(1); }
.menu-container.open .airplane { 変換: 変換(-50%, -50%) 変換(0, -100px) スケール(1); }
.menu-container.open .bluetooth { 変換: 変換(-50%, -50%) 変換(70px, -70px) スケール(1); }
.menu-container.open .flashlight { 変換: 変換(-50%, -50%) 変換(100px, 0) スケール(1); }
.menu-container.open .location { 変換: 変換(-50%, -50%) 変換(70px, 70px) スケール(1); }
.menu-container.open .dnd { 変換: 変換(-50%, -50%) 変換(0, 100px) スケール(1); }
.menu-container.open .screenshot { 変換: 変換(-50%, -50%) 変換(-70px, 70px) スケール(1); }
</スタイル>
</head>
<div>
</div>
以上がHTML CSSとJavaScriptを使用したスマートスクリーンアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScript css html using pointer location display position overflow margin border viewport background transform transition animation flex
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。