我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

裸辞在家打通了茶杯头，复活次数已经数不清了，痛苦倒是印在我的心里挥之不去了。

茶杯头游戏发布已经好久了，想必大家早就体验过了，今天就带大家拾起曾经的痛苦，啊不，拾起童年的回忆，一起用 CSS 画个马可人，重（忆）温（苦）美（思）好（甜）。

效果预览

码上掘金

思路解析

脑阔

马可人的脑袋实际上是一个半圆。半圆我们可以使用 border-radius 进行绘制。

position: relative;
width: 180px;
height: 128px;
border-radius: 50%/  30px 30px 100% 100%;
background: #D9DCDB;
overflow: hidden;

border-radius 属性值中，50% 表示的是 左上角、右上角、右下角、左下角的值都是 50% 。而后面的四个值代表的是四个角对应的圆的 y 轴直径。

由于眼睛和嘴巴需要 定位 来实现，所以我们需要将脑阔设置为 相对定位。

眼睛

眼睛需要由三个部分组成，两个椭圆+一个三角形。

外面一层椭圆需要使用定位，里面的椭圆进行绝对定位到右侧，三角形的实现我们可以使用伪元素，减少标签嵌套层数。

三角形的绘制方法：

width: 0;
height: 0;
border: 8px solid transparent;
border-left: 8px solid #fff;

眼睛完整代码如下：

.right-eye, .left-eye {
  position: absolute;
  top: 0;
  left: 40%;
  transform:  rotate(4deg);
  .eye-white {
    position: absolute;
    bottom: 4px;
    right: -1px;
    width: 20px;
    height: 40px;
    border-radius: 14px;
    background-color: #000;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-45%);
      width: 0;
      height: 0;
      border: 8px solid transparent;
      border-left: 8px solid #fff;
    }
  }
}

这里眼睛实际上会超出脑阔，所以脑阔那边使用了 overflow: hidden 来处理溢出，这样另一只小的眼睛就会显得自然一些。

鼻子

由于脑阔使用了 overflow: hidden ，鼻子如果写在 .head 里的话是会被裁掉的，所以我们要将鼻子对应的标签和 .head 对应的标签平级。

鼻子使用一个椭圆+一个圆角矩形组成。

鼻子的高光部分我们可以使用 filter: blur(3px); 来进行模糊处理，显得更自然些。

耳朵

耳朵部分由两个半圆组成，需要注意的是内层的半圆背景是透明的。

嘴巴

嘴巴由两个大小椭圆组成，小圆用来将大圆遮住且设置为透明。

结束语

技术有限，眼睛的处理和脑瓜子的角度处理感觉不是很到位，少了点感觉，CSS 学会容易，学好难，任重而道远，还是得不断巩固提升。