用 HTML 和 CSS 绘制卡通角色

今天我用HTML和CSS完成了一个新的卡通动画：

它像我很多CSS绘图一样，一开始并没有明确最终效果。我只是想练习背景阴影、定位和尺寸，于是就从这些入手……但很快我就偏离了这些方向……

我对这幅画的一些喜欢/不喜欢的地方：

• 调整边框宽度：浏览器会自动调整圆角边框的宽度，使连接处不会出现跳跃。这样一来，调整边框宽度就能营造出比等宽边框更具卡通感的效果。例如，在下巴、耳朵或鼻子等部位就能看到这种效果。
• 我原本想利用背景图片来画眼睛，也许还有鼻子和嘴巴……但结果却比我最初预想的要复杂一些。
• 我画不出像样的棒球帽（或者说，画不出任何帽子）。画出来总是歪的。我需要参考一些图片，尽量让它更“写实”（或者说，在卡通画里尽可能写实）。
• 阴影和细节：我非常喜欢完成阴影和胡须的绘制。这让我有机会练习框式阴影，弥补了之前画眼睛“失败”的遗憾，我对最终效果还算满意。

还有一段记录整个制作过程的延时视频：

这并非有意为之，或许只是我的错觉，但这有点像克里斯·科耶尔（有点像😅）

我尝试改进一下棒球帽的制作，这是成果。虽然还不完美，但看起来比以前好多了：