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

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

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

　　综上，这篇博文主要用来分享用CSS3绘图的心得及所需的技术。

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

　　演示地址：http://dewey.sinaapp.com/maomi/

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

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

	文艺版： 在Chrome 18、Safari 5.1中展示正常，且有动画（注意那个泡泡）； 测试了Firefox 10/11、IE 10/9，均能正常显示，但无动画（动画部分使用了webkit）
	无奈版：  在Opera11下的效果…… 请注意那个钢韧的背部曲线！我会在下文中做出解释的
	神兽版： IE8下的显示效果，果然霸气侧漏…… 我这儿还真没找来IE6测试，要不还有更奇葩的呢

实现思路：

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

所用工具：

　　Vim和Chrome（当然你没准儿还需有别的浏览器来测试兼容性），这条很无聊，毕竟各有所好。写在这里，主要想说明下调试技巧。方法火星了，仅供和我一样的菜鸟参考。利用Chrome万能的F12，如果你要改变某一元素的值，只用在element--“元素”标签页下找到相关项，鼠标双击即可进行修改。技巧在于，如果你在数值上按下“上/下方向键”，那么相应的值就会随之增大/减小。这在调整形状或是改变角度时显得尤其好用。因为你能看到一个线性的变化过程，而且你能决定何时停下来;)Safari的开发人员工具和FireBug也能提供同样的操作。

代码概述：

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

 用到的CSS3属性：

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

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

***：考虑到本文的性质，不打算对相应的属性进行过多的描述了，仅针对本例进行解释。毕竟不少园友都贡献过相关的知识了，而且我们还有Google。

 

---

::CSS3线性渐变::

-xxx-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

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

---

::CSS3变形::

-xxx-transform : none | <transform-function> [ <transform-function> ]*
or:
-xxx-transform : rotate | scale | skew | translate |matrix;

• 本例中使用了rotate--"旋转"，内部是一个表示倾斜角度的参数，正负皆可
• 头部及不少细小部分（如花斑、嘴巴等）都利用它来实现旋转

---

::CSS3圆角::

border-radius : none | <length>{1,4} [ / <length>{1,4} ]?

• 圆角的新闻应该满世界都是了吧……不过还是有些东西值得分享下。平时用这个属性来绘制圆角区域，一般都扔进1~4个值，分别按照top-left、top-right、bottom-right、bottom-left的顺序来设置。如果仅仅这样的话，你会看到猫咪的脸不是一张大饼的话，就是麻将牌。所以在此加入了可选的参数“/”。根据规定“/”前的值设定该角水平方向的半径，其后的值设定垂直方向的半径
• 本例中多处使用了该属性（毕竟是画图嘛，而且我只用了两种图形，另外一个在下一节介绍），但是上面讲的应该不很直观，建议用上文提及调试方法对源码进行更改，丰衣足食

---

 ::CSS3阴影::

box-shadow: <length> <length> <length> <color>

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

 

非CSS3新增的属性：

---

::三角形::

.nyancosensei .head .ear{
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 89px solid #FFFFFF;
}

• 以上就是绘制猫咪耳朵的代码了，算是简单的css小技巧，我也是通过园里一博友的文章学到的（抱歉，没记下链接）
• 大家应该注意到，猫咪身上没有描边的只有耳朵了。其实，这是因为边线的颜色是白的，而这儿并没有设定背景色。

---

::关于遮盖::

• 我们再来回看下Opera中的悲情展示——威武的断背……其他浏览器中表现正常，所以这应该是O厂的一个bug——我很想这样说，但其实别的浏览器的处理也不尽人意
• 关于圆角的遮挡，说的准确点是：用外部圆角的div遮挡内部div超出边界的内容，怎么办？overflow:hidden？至少一开始我这样做是不行的。在WebKit解析中，如果外层div的position:absolute;那么内部元素所对应的外层边界就是外层div的原始长宽，也就是那个矩形。所以就出现了那让人无语的断背……
• 有一点值得明确下，overflow:hidden是有效的，但解析的bug在于对外层边界的判断
• 看源码大家应该都知道了，为了解决这个矛盾，我把.body的position设为static，然后WebKit就神奇般的正常了……由于当时没有测试FF和IE，不知道这是不是浏览器对CSS3解析的通病。但Opera这边，我就真没办法了
• 猫咪头部的斑纹我用了另一种方式来处理：让内部元素的边框和外部的曲线一致，这样就不会挡着外边的了-_-||说着都感觉别扭。哪位朋友有更好的办法和想法的，请一定教教我

---

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

• 也许您注意到，源码中凡是牵扯到长宽的，我都用具体数值。之前尝试过百分数，但都被移除了。原因是在我的Android 2.3.6手机上，用原生浏览器查看的话，持有该值的元素不能显示圆角。

---

 

 

WebKit动画：

.nyancosensei .bubble {
    -webkit-animation: 'puff' 2.5s linear infinite;
}
@-webkit-keyframes puff {
    0% {
    width: 70px;
    height: 70px;
    margin: 100px 0 0 20px;
    }
    22% {
    width: 90px;
    height: 90px;
    margin: 50px 0 0 20px;
    }
    40% {
    width: 100px;
    height: 100px;
    margin: 20px 0 0 20px;
    }
    70% {
    width: 90px;
    height: 90px;
    margin: 50px 0 0 20px;
    }
    100% {
    width: 70px;
    height: 70px;
    margin: 100px 0 0 20px;
    }
}

• 我在这儿直接贴源码了……貌似这样说方便点
• 第一个参数指定了keyframes的名字puff，在下文中有对其的定义
• 第二个参数指定了在多长时间内完成动画，本例中是2.5秒
• 第三个参数指定了动画了播放方式，有 “ease” “linear” “ease-in” “ease-out” “ease-in-out”几个值可选，这里选用了linear方式，使得帧与帧之间过度得较为平化
• 最后一个参数指定动画循环的次数，infinite即为无限次，默认是1
• 以上只是设定了动画的执行方式，具体关键帧的定义在@-webkit-keyframes 中。百分数表示了关键帧相对播放进度的位置，通过在不同关键帧间的线性切换，动画就有了

 

总结：

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

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

转载于:https://www.cnblogs.com/blindumb/archive/2012/04/13/2444142.html