Elvita Fernandes 撰写的《前端挑战赛 12 月版》

灵感

对于这个项目，我从冬季及其带来的节日气氛中汲取了灵感。我想创作一件体现十二月舒适、神奇感觉的作品，将冬雪、闪烁的灯光和节日气氛相结合。目标是仅使用 HTML 和 CSS 捕捉这个季节的美丽，展示当您使用这些工具进行艺术表达时，前端开发是多么富有创意和乐趣。

这是我的 CSS 艺术项目：

演示链接：https://youtu.be/ZCtaOj9A-1A

Github链接：https://elvita04.github.io/winterseason-website/

以下是我创作的艺术作品的预览：

过程

这个项目挑战了我，让我跳出传统的网页设计思维，深入研究基于 CSS 的艺术。我首先集思广益，想出了代表十二月的元素——雪花、圣诞树、礼物和灯光。然后，我专注于使用 CSS 形状和动画来让这些元素栩栩如生。我经过多次反复尝试，才找到合适的比例、时间和颜色。

最大的挑战之一是使用纯 CSS 来实现逼真的效果，例如飘落的雪花和圣诞灯的光芒。我必须使用大量 @keyframes 动画，并创造性地使用渐变、阴影和伪元素来模拟这些效果。

我学到了很多关于 CSS 的强大功能，尤其是在动画和设计方面。我很惊讶，只用 CSS 就能实现这么多功能——不需要 JavaScript 或图像。这也很好地提醒了我们在从事艺术项目时，高效规划和构建代码的重要性。

我对雪花的效果特别满意。动画效果微妙而有效，我觉得它为场景增添了一丝真实感。我也很喜欢圣诞树上闪烁的灯光——它们会变色，营造出节日气氛。

我希望进一步完善这个项目，可能添加更多交互元素，例如一个按钮来将场景从白天更改为夜晚，甚至使用 CSS Grid 和 Flexbox 添加更高级的动画。可能性无穷无尽！

查看所有参与方式、证明您的技能并赢取奖品。

访问挑战中心