欢送关注我的公众号：前端侦探

练习 CSS 有一个比拟乏味的形式，就是施展设想，绘制各式各样的图案，比方来绘制一只思否猫？

思否猫，SegmentFault 思否的吉祥物，是一只举世无双、特立独行、酷爱自在的(>^^<)独角猫，也是社区的首席摸鱼官

你也能够提前查看残缺代码 CSS sifou cat (runjs.work)

其实还是有点小简单的，不要慌，依据构造，能够拆分成头、眼睛、眉毛、耳朵、鼻子、嘴巴、角这几个局部，一起来看看如何实现的吧，有超级多的 CSS 绘制小技巧~

一、头

首先是最外层头的形态，是一个不太规定的椭圆，能够用border-radius实现，间接手写可能会有点不太精确，能够借助这个圆角生成工具进行微调

https://9elements.github.io/fancy-border-radius

假如 HTML是这样的

<cat></cat>

那么，脸的形态能够这样来实现

cat{  width: 400px;  height: 320px;  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  border: 3px solid #222224;  background: #fef2dc;}

成果如下

而后脸上还有两个圆形的花纹，通过两个径向突变绘制

对径向突变不太熟悉的能够参考张鑫旭老师的这篇文章：10个demo示例学会CSS3 radial-gradient径向突变
cat{  /**/  background: radial-gradient(circle at 20px 14px, #fff 6px, transparent 7px),     radial-gradient(circle at 12px 26px, #fff 3px, transparent 4px)     #222224 no-repeat;}

成果如下

哈哈，是不是有点像小孩头发？

二、眼睛

接着来绘制眼睛，能够独自用一个标签，而后用两个伪元素绘制

<cat>  <!-- 眼睛 -->    <eye></eye></cat>

眼睛比较简单，一个圆形加一个边框，边框能够用border或者box-shadow生成，而后通过相对定位定位就行了

eye::before,eye::after{  position: absolute;  content: '';  width: 50px;  height: 50px;  background: #222224;  box-shadow: 0 0 0 10px #967c51;  border-radius: 50%;}eye::before{  left: 60px;  top: 100px;}eye::after{  right: 110px;  top: 110px;}

成果如下

当初有点傻乎乎的，须要加点高光，和后面一样，用径向突变绘制两个红色的圆就行了

eye::before,eye::after{  /**/  background: radial-gradient(circle at 20px 14px, #fff 6px, transparent 7px),     radial-gradient(circle at 12px 26px, #fff 3px, transparent 4px)     #222224 no-repeat;}

成果如下

看，有了高光立即就不一样了，炯炯有神

三、眉毛

而后给眼睛上加点眉毛，左右两侧的眉毛是三根红色的弧线，弧线能够用border-radius加上border来绘制，只保留一个方向上的border，原理是这样的

因为一个元素只能绘制一条这样的弧线，加上伪元素也只能绘制三条，所以这里用两个标签

<cat>  <!-- 眼睛 -->  <eye></eye>  <!-- 眉毛 -->  <eyebrow-l></eyebrow-l>  <eyebrow-r></eyebrow-r></cat>

而后借助伪元素，适当旋转调整

eyebrow-l,eyebrow-r{  position: absolute;  width: 60px;  height: 10px;  border-radius: 100%;  border: 2px solid #fff;  border-width: 2px 0 0 0;}eyebrow-l{  left: 80px;  top: 60px;  transform: rotate(30deg);}eyebrow-r{  right: 130px;  top: 60px;  transform: rotate(-35deg);}eyebrow-l::before,eyebrow-l::after,eyebrow-r::before,eyebrow-r::after{  content: '';  position: absolute;  width: 50px;  height: 10px;  right: 0;  border-radius: 100%;  border: 2px solid #fff;  border-width: 2px 0 0 0;  transform-origin: right center;}eyebrow-l::before{  top: -10px;  transform: rotate(20deg);}eyebrow-l::after{  top: 10px;  transform: rotate(-15deg);}eyebrow-r::before,eyebrow-r::after{  left: 0;  right: auto;  transform-origin: left center;}eyebrow-r::before{  top: -10px;  transform: rotate(-20deg);}eyebrow-r::after{  top: 10px;  transform: rotate(15deg);}

成果如下

当初有点可恶了吧~

四、耳朵

当初加上耳朵，这个绝对比拟容易，首先通过border-radius生成工具调整为一个弧形三角的形态，如下

HTML 中须要增加一个标签

<cat>  <!-- 眼睛 -->  <eye></eye>  <!-- 眉毛 -->  <eyebrow-l></eyebrow-l>  <eyebrow-r></eyebrow-r>  <!-- 耳朵 -->  <ear></ear></cat>

耳朵的轮廓能够用不同的border绘制，实现如下

ear::before{  position: absolute;  content: '';  width: 120px;  height: 200px;  left: -20px;  top: -50px;  border-radius: 79% 21% 0% 100% / 100% 56% 44% 0% ;  background-color: #9e5439;  transform: rotate(-36deg);  border: 10px solid #222224;  border-width: 5px 30px 0 10px;  z-index: -1;}

成果如下

当初耳朵里只有一种色彩，没有层次感，能够通过内暗影生成

ear::before{  /**/  box-shadow: inset -40px -10px 0 #b68679,     inset -110px -80px 0 #b06648;}

这样就失去了层次分明的耳朵

右耳朵也是同样的办法，能够用::after来生成，代码就不反复了，成果如下

有了耳朵，这样是不是就有点像一只猫了？

五、鼻子

接下来是鼻子，鼻子能够看成是一个半椭圆和一个圆三角，HTML如下，只需一个标签就行了

<cat>  <!-- 眼睛 -->  <eye></eye>  <!-- 眉毛 -->  <eyebrow-l></eyebrow-l>  <eyebrow-r></eyebrow-r>  <!-- 耳朵 -->  <ear></ear>  <!-- 鼻子 -->  <nose></nose></cat>

半椭圆能够通过border-radius实现，留神鼻子上的高光，圆角三角能够用一个圆角矩形旋转45deg而后配合横向缩放失去，圆角三角绘制过程如下

具体实现如下

nose{  position: absolute;  left: 140px;  top: 140px;  transform: rotate(5deg);  filter: drop-shadow(0 2px #b68679);  width: 46px;  height: 22px;  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;  background: radial-gradient( 8px 4px at 60% 50%, rgba(255, 255, 255, 0.5) 100%, transparent 0) #fcbaa1 no-repeat;  z-index: 1;}nose::after{  content: '';  position: absolute;  width: 24px;  height: 24px;  border-radius: 5px;  background: linear-gradient(135deg, transparent 50%, #fcbaa1 0);  transform: scale(0.8,1) rotate(45deg);  left: 10px;  bottom: -6px;  z-index: -1;}

这样就失去了小巧玲珑的鼻子~

六、嘴巴

嘴巴其实就是几条弧线，和后面画眉毛的形式相似，通过用border-radius加上border来绘制，因为蜿蜒水平比拟大，能够保留两个方向上的border，绘制过程如下

所以只须要一个标签，而后用两个伪元素画出嘴巴的两条弧线

<cat>  <!-- 眼睛 -->  <eye></eye>  <!-- 眉毛 -->  <eyebrow-l></eyebrow-l>  <eyebrow-r></eyebrow-r>  <!-- 耳朵 -->  <ear></ear>  <!-- 鼻子 -->  <nose></nose>  <!-- 嘴巴 -->  <mouth></mouth></cat>

具体实现如下，留神一下旋转核心轴

mouth{  position: absolute;  left: 159px;  top: 170px;  width: 2px;  height: 30px;  border: 3px solid #222224;  border-width:  0 0 0 2px;  border-radius: 100%;}mouth::before{  content: '';  position: absolute;  left: 0;  bottom: 0;  width: 60px;  height: 20px;  border-radius: 0 0 0 20px;  border: 2px solid #222224;  border-width:  0 0 2px 2px;  transform: translate(-100%) rotate(-20deg);  transform-origin: right bottom;}mouth::after{  content: '';  position: absolute;  right: 3px;  bottom: 0;  width: 80px;  height: 30px;  border-radius: 0 0 30px 0;  border: 2px solid #222224;  border-width:  0 2px 2px 0;  transform: translate(100%) rotate(25deg);  transform-origin: left bottom;}

嗯，一只可恶的小猫咪就呈现了

七、角

最初，加上思否猫独特的标识，独角。

这部分算是这外面最简单的一块了，整体形状是一个圆锥形，同样能够借助border-radius生成工具调整进去

而后左侧的高光能够用内暗影模仿，螺纹形态能够用径向突变绘制，绘制过程如下

角的上面还有三个黑白的小标记（临时还不晓得叫什么）（官网介绍叫代码缩影>代码光波）

因为形态雷同，只需绘制一个，其余两个能够间接用box-shadow生成，向两个方向投射

同样只须要一个标签

<cat>  <!-- 眼睛 -->  <eye></eye>  <!-- 眉毛 -->  <eyebrow-l></eyebrow-l>  <eyebrow-r></eyebrow-r>  <!-- 耳朵 -->  <ear></ear>  <!-- 鼻子 -->  <nose></nose>  <!-- 嘴巴 -->  <mouth></mouth>  <!-- 角 -->  <horn></horn></cat>

具体实现如下

horn{  position: absolute;  width: 40px;  height: 120px;  border-radius: 52% 48% 50% 50% / 93% 93% 7% 7% ;  background: #808087;  box-shadow: inset 10px -14px 0 -10px #808087, inset 24px -14px 0 -14px #b6b8be;  border: 3px solid #808087;  left: 165px;  top: -110px;  transform-origin: center bottom;  transform: rotate(-20deg);}horn::before{  content: '';  position: absolute;  inset: 0;  border-radius: 52% 48% 50% 50% / 93% 93% 7% 7% ;  background: repeating-radial-gradient( circle at 36px 0px,#b6b8be 30px 34px, transparent 35px 61px),  repeating-radial-gradient( circle at 36px 0px,#808087 34px 38px, transparent 39px 65px);}horn::after{  content: '';  position: absolute;  bottom: -25px;  transform: rotate(20deg);  width: 12px;  height: 4px;  border-radius: 4px;  background-color: #f6f090;  box-shadow: 18px 0 0 #d56564, -18px 0 0 #a2a9a6;}

实现！

残缺代码能够查看 CSS sifou cat (runjs.work)

八、总结一下

哦对了，本文绘制的成果并不是齐全和原图统一，很多中央做了改变，次要是原图偏手绘格调，很多线条都比拟随便，尤其是头上的角，考虑半天，简化成了本文的成果，下方是官网原图

不过，从整体神气上还是有八九分类似的上面总结一下绘制的几个小技巧

  1. 圆形、不太规定的椭圆都能够思考用border-radius，可视化生成工具能够很不便地实现
  2. 弧线能够用border-radius配合部分border生成
  3. 圆形高光背景能够用radial-gradient绘制
  4. 侧边高光还能够用内暗影来实现
  5. 圆角三角能够通过旋转圆角矩形失去
  6. 雷同形态能够用box-shadow生成多份
  7. 各种绘制技巧灵便应用

当然理论工作中，我是不举荐绘制这么简单的图形的，次要是理解 CSS 绘制的相干技巧，碰到一些简略的图标、自适应尺寸、色彩可变的图形就入不敷出了。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探
本文参加了1024程序员节，欢送正在浏览的你也退出。