前端挑戰：CSS 藝術 - 12 月版

2024 年 CSS 藝術挑戰賽

這是前端挑戰賽 - 12 月版的提交內容，CSS 藝術：12 月。

靈感

在偶然發現 Bryan James 的網站（他利用 CSS 多邊形創建了 30 個瀕臨滅絕的物種）後，我將其視為開始嘗試這個漂亮工具的標誌。

示範

https://emmy-zhang.github.io/css-art/

旅行

• 草圖：以三角形勾勒出一隻鷓鴣，靈感來自歌曲《聖誕節的 12 天》。
• 輪廓：在 HTML 中勾勒出元素的輪廓，並使用 CSS 多邊形將它們粗略地塑造成所需的形狀。
• 最佳化：手動將元素移到位。
• 造型：更新了顏色，加入了一些動畫。
• 移動：嗯，他們說「行動優先」是有原因的。在較小的螢幕上進行測試時，元素分散了，因此我手動更新了元素的高度和寬度以適應較小的螢幕。

在 Bryan James 的網站中，在現有圖像上使用 JS 追蹤器來建立多邊形。出於時間和理智的考慮，我選擇了一種不太複雜的方法，但我想使用追蹤器可以動態創建多邊形，並且會使移動樣式和動畫變得更加容易- 也許是下一次的項目:)我玩得很開心不過，透過這個學到了很多東西！

以上是前端挑戰：CSS 藝術 - 12 月版的詳細內容。更多資訊請關注PHP中文網其他相關文章！