前端挑战：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中文网其他相关文章！