纯CSS3绘制的猫咪老师——献给喜欢CSS3及《夏目友人帐》的你失明的色盲

最近正发愁着毕业设计做些什么，而后闲逛时看到了诸如twitter小鸟、哆啦A梦、灰太狼等纯CSS3实现的图像。于是本着初学的心态，挑了喜欢的卡通形象来解闷。

于是花了一个晚上做完，现在想来多少有点遗憾。因为当时没有分段做个记录，要不现在就能搞个更详细的制作过程给各位了。

不知道园里有朋友看过《夏目友人帐》没，不然很难向您解释我为什么喜欢这只大肥猫……

就不提供打包下载了，源码未压缩，需要的朋友请右键另存。源码采用MIT，博文的转载请保留作者和出处。

废话了那么多，我们来看下实际效果吧(以下为参考截图)：

在Chrome18、Safari5.1中展示正常，且有动画（注意那个泡泡）；

测试了Firefox10/11、IE10/9，均能正常显示，但无动画（动画部分使用了webkit）

在Opera11下的效果……

请注意那个钢韧的背部曲线！我会在下文中做出解释的

IE8下的显示效果，果然霸气侧漏……

我这儿还真没找来IE6测试，要不还有更奇葩的呢

在美术基础上对图像进行粗略划分，每个部分划为一div。对该div内部元素进行同样的操作，直至不能再划分。这样做只是为了定位方便，虽然方法有很多，但如果你在后期要调整头和身体相对位置的话，这样更方便点。然后用CSS3的属性把div调整到你想要的形状，上色，发布，然后告诉别人，你的浏览器该升级了。

最大的一个div类名为nyancosensei，是日文“ニャンコ先生（猫咪老师）”的罗马音。身体各部分的命名均有相应的英文来标识，这在代码中多有体现，不再赘述。倒是想借这个机会请教下，不知道在我的代码里，某些类的前缀是不是有点啰嗦了呢？请问有文件体积与解析效率双赢的写法吗？求教。

*：以代码中的出现顺序为序

**：浏览器都搞出了前缀的名堂，除了让人多写一行基本一样的东西外，基本也没别的用了（这种说法不准确的，但请让我发泄一下吧）……所以下文中的代码示例均用xxx代替"webkit(Chrome,Safari用)","moz(Firefox用)","ms(IE用)","o(Opear用)"

::CSS3线性渐变::

-xxx-linear-gradient([||,],[,]*)第一个参数是渐变的起始点，本例中用了"top"，实现了背景色自上而下的变化。可选参数还有"bottom","left","right"等，而且你还可以用百分数后两个参数代指渐变的起止色值得一提的是，WebKit更新了语法，兼容Mozilla，要不然我也不会用xxx来代替了::CSS3变形::

-xxx-transform:none|[]*or:-xxx-transform:rotate|scale|skew|translate|matrix;本例中使用了rotate--"旋转"，内部是一个表示倾斜角度的参数，正负皆可头部及不少细小部分（如花斑、嘴巴等）都利用它来实现旋转::CSS3圆角::

box-shadow:四个值分别代表了阴影离开文字的横向距离，阴影离开文字的纵向距离，阴影的模糊半径和阴影的颜色猫咪腹部的阴影由此而来

::三角形::

::关于长宽的百分比::

纯CSS3的图像绘制起来不难，但制作方法有点太过原始了，要用来代替图像还不现实。倒是在移动设备中，由于压缩文件体积理论上小于同分辨率的图片，我倒是乐于那它来做些WebApp的loading图或logo;)

开博的第一篇，不知道怎样写才算合适，请各位多多指教啦。