ホームページ >ウェブフロントエンド >CSSチュートリアル >純粋な CSS を使用して熱気球の効果を実現する方法 (ソースコード添付)
この記事の内容は、純粋な CSS を使用して熱気球の効果を実現する方法に関するものです (ソースコードが添付されています)。必要な方は参考にしていただければ幸いです。あなたのお役に立てますように。
https://github.com/comehope/front-end-daily -challenges
domを定義します。コンテナには2つのサブ要素があります。.envelope
は傘のカバー、.basket
を表します。ハンギングバスケットを表します:
<figure> <div> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> </div> </figure>
中央揃え表示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(deepskyblue, skyblue, lightblue 20%); }
コンテナのサイズ、子要素 .envelope
および .basket
を定義します 垂直方向中央揃えレイアウト:
.balloon { width: 12em; height: 19em; font-size: 16px; display: flex; flex-direction: column; align-items: center; }
最初に傘カバーを描画します。
傘カバーのサイズを定義します:
.envelope { position: relative; width: inherit; height: 16em; }
傘カバーの形状は、2 次元平面上で上端が球形、下端が円錐形になります。平面は二等辺三角形なので、まず上部に円を描き、下部に三角形を描きます。
最初に上の円を描画します:
.envelope span { position: absolute; width: inherit; height: 12em; border-radius: 50%; color: orange; background-color: currentColor; }
次に、疑似要素を使用して下の二等辺三角形を描画します:
.envelope span::before { content: ''; position: absolute; width: 0; height: 0; border-width: 10em 5.5em 0 5.5em; border-style: solid; border-color: currentColor transparent transparent transparent; left: calc(50% - 5.5em); top: 8.45em; }
.envelope
下に 2 つの があります < ;span>
要素を使用すると、2 番目の <span></span>
が変形して色が変わり、傘のカバーが縦縞模様になります:
.envelope span:nth-child(2) { transform: scaleX(0.4); filter: brightness(0.85) contrast(1.4); }
hide.envelope
容器の外側の部分は、三角形の下の鋭い角を切り落とします。
.envelope { overflow: hidden; }
これで傘カバーが完成し、ハンギングバスケットが描かれます。
ハンギング バスケットのサイズを定義します:
.basket { position: relative; width: 2em; height: 3em; }
::before
疑似要素を使用してバスケットを描画します:
.basket::before { content: ''; position: absolute; width: inherit; height: 1.6em; background-color: peru; bottom: 0; border-radius: 0 0 0.5em 0.5em; }
Use ::after
疑似要素はバスケットの上端を描画します:
.basket::after { content: ''; position: absolute; width: 105%; height: 0.3em; background-color: saddlebrown; left: calc((100% - 105%) / 2); top: 1.3em; border-radius: 0.3em; }
.basket
以下に 4 つの <span></span>
要素があり、4 本のケーブルを表し、それらの要素を設定しますスタイルを垂直にします 細い線:
.basket span { position: absolute; width: 0.1em; height: 1.5em; background-color: burlywood; }
ケーブルを配置し、さまざまな角度に傾けます:
.basket span { left: calc((var(--n) - 1) * 0.6em); transform-origin: bottom; transform: rotate(calc(var(--r) * 7deg)); } .basket span:nth-child(1) { --n: 1; --r: -2; } .basket span:nth-child(2) { --n: 2; --r: -1; } .basket span:nth-child(3) { --n: 3; --r: 1; } .basket span:nth-child(4) { --n: 4; --r: 2; }
最後に、熱気球のわずかに浮遊するアニメーション効果を追加します:
.balloon { animation: drift 2s infinite alternate; } @keyframes drift { to { transform: translateY(-5%); } }## #これで完了です!
以上が純粋な CSS を使用して熱気球の効果を実現する方法 (ソースコード添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。