CSS 绘制一只思否猫

练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？,思否猫，SegmentFault 思否[1]的吉祥物，是一只独一无二、特立独行、热爱自由的(>^ω^<)独角猫，也是社区的首席摸鱼官。,,你也可以提前查看完整代码：CSS sifou cat (codepen.io)[2] 或者 CSS sifou cat (runjs.work)[3]。,其实还是有点小复杂的，不要慌，根据结构，可以拆分成头、眼睛、眉毛、耳朵、鼻子、嘴巴、角这几个部分，一起来看看如何实现的吧，有超级多的 CSS 绘制小技巧~,首先是最外层头的形状，是一个不太规则的椭圆，可以用border-radius实现，直接手写可能会有点不太准确，可以借助这个圆角生成工具进行微调。,https://9elements.github.io/fancy-border-radius[4],,假设 HTML是这样的。,那么，脸的形状可以这样来实现。,效果如下：,,然后脸上还有两个圆形的花纹，通过两个径向渐变绘制。,对径向渐变不太熟悉的可以参考张鑫旭老师的这篇文章：10个demo示例学会CSS3 radial-gradient径向渐变[5]。,效果如下：,,哈哈，是不是有点像小孩头发？,接着来绘制眼睛，可以单独用一个标签，然后用两个伪元素绘制。,眼睛比较简单，一个圆形加一个边框，边框可以用border或者box-shadow生成，然后通过绝对定位定位就行了。,效果如下：,,现在有点傻乎乎的，需要加点高光，和前面一样，用径向渐变绘制两个白色的圆就行了。,效果如下：,,看，有了高光立刻就不一样了，炯炯有神。,然后给眼睛上加点眉毛，左右两侧的眉毛是三根白色的弧线，弧线可以用border-radius加上border来绘制，只保留一个方向上的border，原理是这样的。,,由于一个元素只能绘制一条这样的弧线，加上伪元素也只能绘制三条，所以这里用两个标签。,然后借助伪元素，适当旋转调整。,效果如下：,,现在有点可爱了吧~,现在加上耳朵，这个相对比较容易，首先通过border-radius生成工具调整为一个弧形三角的形状，如下：,,HTML 中需要添加一个标签。,耳朵的轮廓可以用不同的border绘制，实现如下：,效果如下：,,现在耳朵里只有一种颜色，没有层次感，可以通过内阴影生成。,这样就得到了层次分明的耳朵。,,右耳朵也是同样的方法，可以用::after来生成，代码就不重复了，效果如下：,,有了耳朵，这样是不是就有点像一只猫了？,接下来是鼻子，鼻子可以看成是一个半椭圆和一个圆三角，HTML如下，只需一个标签就行了。,半椭圆可以通过border-radius实现，注意鼻子上的高光，圆角三角可以用一个圆角矩形旋转45deg然后配合横向缩放得到，圆角三角绘制过程如下：,,具体实现如下：,这样就得到了小巧玲珑的鼻子~,,嘴巴其实就是几条弧线，和前面画眉毛的方式类似，通过用border-radius加上border来绘制，由于弯曲程度比较大，可以保留两个方向上的border，绘制过程如下：,,所以只需要一个标签，然后用两个伪元素画出嘴巴的两条弧线。,具体实现如下，注意一下旋转中心轴：,嗯，一只可爱的小猫咪就出现了。,,最后，加上思否猫独特的标识，独角。,这部分算是这里面最复杂的一块了，整体外形是一个圆锥形，同样可以借助border-radius生成工具调整出来。,,然后左侧的高光可以用内阴影模拟，螺纹形状可以用径向渐变绘制，绘制过程如下：,,角的下面还有三个彩色的小标记（暂时还不知道叫什么）（官方介绍叫代码缩影>代码光波?）。,,由于形状相同，只需绘制一个，其他两个可以直接用​box-shadow生成，向两个方向投射。,,同样只需要一个标签：,具体实现如下：,完成！,,完整代码可以查看：CSS sifou cat (codepen.io)[6] 或者 CSS sifou cat (runjs.work)[7],哦对了，本文绘制的效果并不是完全和原图一致，很多地方做了改动，主要是原图偏手绘风格，很多线条都比较随意，尤其是头上的角，思索半天，简化成了本文的效果，下方是官方原图：,,不过，从整体神情上还是有八九分相似的下面总结一下绘制的几个小技巧：,当然实际工作中，我是不推荐绘制这么复杂的图形的，主要是了解 CSS 绘制的相关技巧，碰到一些简单的图标、自适应尺寸、颜色可变的图形就绰绰有余了。