7 天 CSS 图形和动画

看到上面的那些图形了吗？这些都是我做的！最棒的是，它们全部都是100%用代码制作的。没错，光用代码就能创作出有趣的图形艺术。

2019 年圣诞假期期间，我决定挑战自己，连续 7 天每天创作一幅 CSS 图形。我这样做是为了练习我的 CSS 定位和动画技能，同时也因为在 CodePen 上看到一些 Pen 的灵感后，我想创作一些可爱的代码艺术作品。在这 7 天里，我学到了很多东西，并有机会运用 CSS 的形状创作一些有趣又可爱的图形。以下是这 7 天的回顾以及我所做的一切。

第一天——熊先生

第一天，我从另一支笔上汲取灵感，决定画一只熊。我只用了圆形，所有形状的边框半径都设为50%。这相当简单直接，花了我大约30分钟就完成了。我给泡泡糖加了渐变，让它看起来更逼真一些。作为我的第一幅画，我觉得还不错，而且让我吃惊的是，我完全没用谷歌搜索就完成了。

第 2 天 - 弹跳的玛格丽特

玛格丽特是我的同事，她总是对我的学习成果和正在进行的项目很感兴趣。作为一份小礼物，我决定为她制作一个CSS图形，并向她展示所有相关的代码。起初我只想用形状来做一张脸，但后来我觉得加点动画会更有趣。我决定在底部添加一个阴影，让她的头部随着头部的移动而上下摆动，同时阴影也会随之扩展。起初，同步头部和阴影的两种不同动画有点困难，但经过一些调整，我终于成功了。

第三天——早餐吃鸡蛋

所以任何认识我的人都知道我早上爱吃鸡蛋——尤其是鸡蛋沙拉三明治。开始做这个的时候，我显然饿了，于是决定做一个煎蛋动起来的煎锅。为了做这个，我尝试了煎锅手柄上不同的边框半径百分比。我花了大约45分钟完成，总体来说相当简单。

第 4 天 - 爱心和点赞

这是第二个最爱——主要是因为它的配色方案。我超爱粉色！鼠标悬停在心形上时，它会跳动。我使用了 :before 和 :after 伪类来创建心形，这是我以前从未用过的东西。基本上，使用 :before 和 :after 可以翻转形状，从而得到心形的两个部分。一开始这并不容易，因为当我给心形添加动画时，它一直向左旋转，但后来我意识到，我可以在动画关键帧中将缩放和旋转属性合并在一起，让它变直，最终成功了。

第 5 天 - 晴间多云天气预报

这大概是完成时间最长的作品之一，我都忘了时间了。我把云朵和太阳做了动画，让它们同步。太阳慢慢露出周围的边界，让它看起来像在跳动，云朵左右移动，不透明度设为90%，让它看起来透明。我的配色灵感来源于iPhone的天气应用。

第六天——简陋的圣诞树

第六天是圣诞节，说实话，我最不想做的就是用 CSS 做个图形。我决定继续做点什么，因为我已经耽误了好几天了，想赶紧做完。家人离开后，我回到工作岗位，决定做一件或许最适合这个场合的东西——一棵圣诞树。我第一次用三角形来做圣诞树，用圆形做彩灯。我把它叫做“简陋圣诞树”，因为我觉得它有点仓促和拼凑的感觉——确实如此。我大约在 45 分钟内就完成了所有工作。

第 7 天 - 我的自画像

挑战的最后一天，我画了一张自画像，里面有一个眨眼的动画，这是我最喜欢的一张（虽然我可能有点偏心，呵呵）。我觉得用一些更个性化的东西来结束挑战是个好主意。我用了很多圆圈来画我的卷发。为了让我的肩膀区域出现在黄色框里，而不是“溢出”到背景里，我使用了 overflow:hidden 属性。嘴巴的造型也做了同样的处理，这样我的舌头就不会露出嘴巴外面了，哈哈。

综上所述...

这次挑战很棒，让我有机会练习和提升我的CSS技能，我很高兴我决定参加。我还有很长的路要走，还有很多东西要学，但我很高兴自己坚持下来并完成了挑战——即使中间有几天没做。我计划等有空的时候再做更多CSS图形，充实我的收藏。