首頁 > web前端 > css教學 > 火箭表情符號

火箭表情符號

WBOY
發布: 2024-09-09 08:30:32
原創
579 人瀏覽過

Rocket Emoji

這是前端挑戰 v24.09.04,CSS 藝術:空間的提交。

靈感

此提交的靈感來自於慶祝人們在聊天中取得的成功。用來確認勝利的一種與太空相關的表情符號是火箭表情符號。

示範

旅行

這次挑戰提供了極佳的學習體驗。任務是使用 CSS 和 HTML 創建火箭表情符號,其中涉及製作網站上通常不常見的形狀。
我先將影像分成 8 部分:

  1. 身體
  2. 鼻錐
  3. 窗戶
  4. 左鰭
  5. 中鰭
  6. 右鰭
  7. 噴嘴
  8. 火焰

Body 是一個旋轉 45 度的 div 元素,每個角落都添加了邊框半徑以使其具有圓形外觀。此元素包含鼻錐窗口Nose Cone 是一個 div 元素,其邊框半徑為 50%,使其成為一個圓形。它位於主體的頂部。 窗口鼻錐 類似,但它有一個邊框給它一個窗框,並且它位於主體 的中心附近。 Left Fin 是一個帶有clip-path 屬性的div 元素。使用此屬性我可以定義一個多邊形,它允許我繪製鰭。 Middle Fin 是一個帶有圓角的 div 元素。 右鰭左鰭類似,但它是倒置的。 Nozzle 是一個圓角的矩形 div 元素。 Flame 是一個方形 div 元素,每個角的邊框半徑不同。 火焰增加了顏色較深的邊框,使其看起來更像火焰。 Flame 新增了動畫,它只是每 2 秒無限期地更改大小和不透明度。背景是一系列徑向漸層屬性,用於在不同位置建立不同大小的隨機白色圓圈。

我學習了一些新的 CSS 技術,包括如何創建動畫和多邊形。未來,我希望為火箭添加更多動畫。

以上是火箭表情符號的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板