今天偶然在codepen上看到一个猫咪loading的动画，仔细看了一下绘制猫咪的过程，觉得有很多细节可以学习。（链接请戳原文）
作者把猫咪的绘制分成头部、躯干、腿部、手部，我们就按照作者的思路来看一看。
躯干
这就是猫咪的躯干？看起来像个甜甜圈啊，环形在CSS里面好像不好画出来，难道要重叠N个同心圆来画？SVG? CANVAS?
其实简单的CSS就可以实现，这里作者机智地选择了渐变的背景填充。可能我们平时用的比较多的是线性渐变（linear-gradient），用来做各种渐变的遮罩之类的，相对限制了我们的思维，总是忘了还有一个效果也很赞的径向渐变（radial-gradient），用在这里刚刚好。
嗯别忘记加上border-radius，不然就会长下面这样。
看到这个图不禁想起，倘若我们需要一个盒子内部有一个居中的圆，也可以使用径向渐变来实现，这个可以相对减少结构的层级。
但是圆环也不是我们最终想要的效果，因为猫咪的躯干在loading过程中有一个伸长缩短的动画，我们需要对圆环进行剪切。
这里可以看出来，裁剪出来的区域就是我们定义的多边形的四个点围起来的区域，得到猫咪的躯干。
头部
头部中最复杂的就是猫咪的脸，所以这一块单独拿出来，更深一步地利用了radial-gradient来描绘出脸的细节。
首先我们创建了一个80px*60px的盒子，这时候，如果直接设置radial-gradient的话，会得到一个如下图鼻子般的椭圆形，但是如果加上circle参数的话，就可以创建一个正圆（图中的脸、眼睛和下巴）。再设置一个线性渐变做胡子。需要注意的是，背景中的层级关系是先定义的在上面。
（莫名觉得上图像酷儿~暴露年龄了哇）
而头部的主体同理于躯干的方法，通过一个环形来裁剪。
那耳朵怎么办呢，同理利用头部的after伪元素和radial-gradient就可以，再定位在头部上拼接起来。
手、脚、尾巴等部分利用border | border-radius 实现。
最后把各个部分通过定位和旋转拼接起来，再添加旋转动画就完成了。
最后再回顾一下：
1、可利用background: radial-gradient实现环状图形；
2、再利用clip-path可以实现扇形，但clip-path目前的兼容性有待考虑，不建议现在运用到对兼容要求比较高的项目中；
3、radial-gradient可以添加circle参数，绘制正圆；
4、background可层叠多个背景元素，层级为先定义为上。
