这是 December 月份前端挑战:CSS 艺术 - 十二月的一份投稿。
灵感
在十二月,我想创作一些能够唤起冬天和冬至时节感觉的东西。脑海中浮现了一个雪景球,象征着冬季庆典、节日季以及雪花飘落的美丽。
这是一个我做的CSS作品展示:Git链接
你可以查看并操作 CodePen 上的代码:CodePen 链接
旅程制作
我先勾画出雪球的基本形状,然后用HTML来构建雪球的基本结构。接着,我开始制作雪花飘落效果的关键挑战是使用CSS动画。我用径向渐变来制作雪花的样子,并调整关键帧以实现顺畅的飘落。圣诞树的外观则是通过clip-path和线性渐变来制作的。
我学了很多关于CSS动画的东西,特别是如何结合JavaScript制作更互动的元素,如像雪花一样随机飘落的效果。这个效果是在雪球模型中实现的。
接下来,我打算试试添加更多互动功能,比如通过JavaScript实现雪花球摇晃效果之类的。