ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS を使用して航空機の舷窓スタイルの切り替えコントロールを実装する方法
この記事の内容は、純粋な CSS を使用して航空機の舷窓スタイルのトグル コントロールを実装する方法についてです。必要な方は参考にしていただければ幸いです。
https://github.com/comehope/front- end-daily-challenges
domを定義します。.windows
コンテナは舷窓を表し、その子要素.curtain
はカーテンを表します。 :
<figure> <div></div> </figure>
中央揃え表示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: skyblue; }
ポートホールのサイズを設定します。フォント サイズは後で使用するため、フォント サイズを変数で定義します:
:root { --font-size: 10px; } .window { position: relative; box-sizing: border-box; width: 25em; height: 35em; font-size: var(--font-size); background-color: #d9d9d9; }
を使用します。影を付けて太い窓枠を描画します:
.window { border-radius: 5em; box-shadow: inset 0 0 8em rgba(0, 0, 0, 0.2), 0 0 0 0.4em #808080, 0 0 0 4em whitesmoke, 0 0 0 4.4em #808080, 0 2em 4em 4em rgba(0, 0, 0, 0.1); }
カーテン スタイルを窓と同じサイズに設定しますが、最後まで引っ張らないでください:
.window .curtain { position: absolute; width: inherit; height: inherit; border-radius: 5em; box-shadow: 0 0 0 0.5em #808080, 0 0 3em rgba(0, 0, 0, 0.4); background-color: whitesmoke; left: 0; top: -5%; }
疑似要素を使用してインジケーター ライトを描画しますカーテンが閉じているときに赤く点灯します。
.window .curtain::before { content: ''; position: absolute; width: 40%; height: 0.8em; background-color: #808080; left: 30%; bottom: 1.6em; border-radius: 0.4em; } .window .curtain::after { content: ''; position: absolute; width: 1.6em; height: 0.8em; background-image: radial-gradient(orange, orangered); bottom: 1.6em; border-radius: 0.4em; left: calc((100% - 1.6em) / 2); }
上は舷窓が閉じているときの様子です。 次に、舷窓窓が開いているときの効果を描画します。
まず、dom に checkbox
を追加します。checked
の場合は、ポートホールが開いていることを意味します:
<figure> <div></div> </figure>
Hidecheckbox
, 要素が非表示の場合でも要素をインタラクティブにするには、opacity(0)
を使用します。そのサイズを舷窓と同じ大きさに設定し、レイヤーが舷窓の上にある場合に実際の効果になります。舷窓をクリックすると、checkbox
:
.toggle { position: absolute; filter: opacity(0); width: 25em; height: 35em; font-size: var(--font-size); cursor: pointer; z-index: 2; }
舷窓が開くと、.カーテン
が上に移動しようとし、インジケータ ライトが緑色に点灯します:
.window .curtain { transition: 0.5s ease-in-out; } .toggle:checked ~ .window .curtain { top: -90%; } .toggle:checked ~ .window .curtain::after { background-image: radial-gradient(lightgreen, limegreen); }
窓の一部を超えて非表示にする:
.window { overflow: hidden; }
次に、舷窓の外の風景を描きます。
ドーム内の雲を表す .clouds
要素を追加し、5 つの <span></span>
サブ要素はそれぞれ 1 つの白い雲を表します。使用方法 雲コンテナは窓の外に青空を描画します:
<input> <figure> <div></div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </figure>
各雲は 3 つの部分で構成されます。最初に最大の部分を描画します:
.window .clouds { position: relative; width: 20em; height: 30em; background-color: deepskyblue; box-shadow: 0 0 0 0.4em #808080; left: calc((100% - 20em) / 2); top: calc((100% - 30em) / 2); border-radius: 7em; }
次に、疑似要素を使用して 2 つの突き出た円弧を描画します。
.clouds span { position: absolute; width: 10em; height: 4em; background-color: white; top: 20%; border-radius: 4em; }
浮かぶ雲のアニメーション効果を増やします:
.clouds span::before, .clouds span::after { content: ''; position: absolute; width: 4em; height: 4em; background-color: white; border-radius: 50%; } .clouds span::before { top: -2em; left: 2em; } .clouds span::after { top: -1em; right: 1em; }
各雲のサイズと位置にいくつかの変更を加えます:
.clouds span { animation: move 4s linear infinite; } @keyframes move { from { left: -150%; } to { left: 150%; } }
最後に、コンテナーの外側のコンテンツを非表示にします:
リーリー完了!
以上が純粋な CSS を使用して航空機の舷窓スタイルの切り替えコントロールを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。