ロケットの絵文字

これは、Frontend Challenge v24.09.04、CSS アート: スペースへの提出物です。

インスピレーション

この投稿は、チャットで人々の成功を祝うことからインスピレーションを受けました。勝利を認めるために使用される宇宙関連の絵文字の 1 つは、ロケットの絵文字です。

デモ

旅

この課題は素晴らしい学習体験を提供しました。このタスクは、CSS と HTML を使用してロケット絵文字を作成することであり、これには通常 Web サイトでは見られない形状を作成することが含まれていました。
まず、画像を 8 つの部分に分割しました。

1. 本体
2. ノーズコーン
3. ウィンドウ
4. 左フィン
5. ミドルフィン
6. 右ヒレ
7. ノズル
8. 炎

Body は、丸みを帯びた外観にするために各角に境界線の半径を追加して 45 度回転された div 要素です。この要素には、ノーズコーン と ウィンドウ が含まれています。 Nose Cone は、境界半径が 50% の円を形成する div 要素です。 Body の上部に配置されます。 ウィンドウはノーズコーンに似ていますが、ウィンドウフレームを与える境界線があり、ボディの中心近くに配置されています。 Left Fin は、clip-path 属性を持つ div 要素です。この属性を使用すると、フィンを描画できるポリゴンを定義できます。 Middle Fin は、角が丸い div 要素です。 右フィンは左フィンに似ていますが、逆になっています。 Nozzle は、角が丸い長方形の div 要素です。 Flame は、各隅の境界線の半径が異なる正方形の div 要素です。 Flame に濃い色の枠線を追加して、より炎の外観を与えました。 Flame にアニメーションが追加されました。これは、サイズと不透明度を 2 秒ごとに無期限に変更するだけです。背景は、さまざまな場所にさまざまなサイズのランダムな白い円を作成するために使用される一連の放射状グラデーション アトリビュートです。

アニメーションやポリゴンの作成方法など、いくつかの新しい CSS テクニックを学びました。将来的には、ロケットにさらに多くのアニメーションを追加したいと考えています。

以上がロケットの絵文字の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。