100 天 CSS 插图练习（11-20）

这是“百日CSS插画挑战”的第二批作品。第14-16天尤其难熬，因为工作堆积如山，我几乎没有时间创作（而且作品质量也确实不怎么样 :S）……不过，我很高兴自己能够保持每天一幅插画的进度。

以下是我过去十天里创作的十幅插图/绘画作品。点击图片即可查看包含代码的完整插图，点击此处可查看包含所有作品及一些变体的 CodePen 合集。

第 11 天：编码大师

这幅漫画完全是原创的。它略带讽刺意味，背景代码与画面代码相同，所以角色实际上是在为自己编写代码。它使用了 CSS 变量，因此可以轻松自定义。

第12天：爱/爱情

我喜欢丹尼斯·霍格斯塔德的立体主义/极简主义动画。我还制作了一个“爱”的变体，鼠标悬停时会变成“Amor”（没有动画效果）。

第13天：漫画人物

又一个完全原创的卡通形象。我很喜欢，虽然不太满意头发的最终效果。这个漫画角色也可以通过 CSS 变量进行自定义（参见第 42 行代码）。

第14天：漂浮塔

我需要学习很多关于透视和阴影的知识。这座看起来有3D效果的城堡有趣的地方在于，它竟然是用一个HTML元素，并运用了裁剪路径和阴影效果实现的。

第15天：毛茸茸的小怪兽举着牌子

这幅作品的灵感来源于我在 Dribbble 上的设计，它与本次挑战中的另一幅卡通作品属于同一系列（实际上我重复使用了一些部分，并且作弊地使用了 SVG 来制作滤镜）。

第16天：腊肠犬

这幅漫画的灵感来源于网上找到的一幅漫画（我不知道作者是谁，所以无法注明出处 :S）……虽然我的版本带有一些辛普森式的风格。

第17天：西班牙哈恩

这是我绘制的西班牙哈恩圣凯瑟琳城堡的插图，哈恩是我长大的城市。为了绘制这幅画（尤其是树木部分），我使用了clip-path滤镜drop-shadow，所以它可能在某些浏览器中无法正常显示。

第18天：惊讶的皮卡丘表情包

用 HTML 和 CSS 制作的热门表情包“惊讶的皮卡丘”版本。表情包上的文字每 7 秒更换一次，其中一些文字可能应该换成“不安的汤姆”……-5 分，表情包用错了！

第19天：长颈鹿

这幅长颈鹿卡通画是根据我大约5年前为女儿画的另一幅画改编的。

第20天：3D景观

基于Parham Marandi在 Dribbble 上的作品 Landscape。它运用了 3D 变换，并具有一定的交互性：您可以移动鼠标在屏幕上查看景观的旋转。

……还有一些额外的东西

昨天睡前我有点空闲时间，就用HTML和CSS画了一只猫头鹰，以“owl”这个词为基础进行创作。你可以在这个视频里看到整个过程：