CSS 小课堂：亲手绘制一只打盹小猪

在 CSS 的世界里，像素点可以幻化出无穷的可能，它可以描绘出绮丽的风景，也能勾勒出栩栩如生的生物。今天，就让我们一起用 CSS 画一只可爱的小猪，给它取个名字叫“小猪猪”吧！

小猪的轮廓：从圆形到椭圆

小猪猪是一个圆润的生物，我们先从一个圆形开始。用 CSS 的 border-radius 属性，我们可以把一个正方形变成一个圆角矩形，再适当调整一下它的宽高，就能得到一个小猪猪的头部轮廓。

.head {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ffc0cb;
}

接下来，我们需要给小猪猪加上身体。身体比头部大一些，而且是椭圆形的。我们可以用两个圆角矩形叠加的方式来实现。

.body {
  width: 150px;
  height: 100px;
  border-radius: 50% 25%;
  background: #ffc0cb;
  position: relative;
  top: 30px;
}

小猪的五官：眼睛、鼻子、嘴巴

小猪猪的眼睛水汪汪的，用两个小圆圈来表示。鼻子圆圆的，用一个椭圆形来表示。嘴巴小小的，用一个三角形来表示。

.eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 20px;
  left: 20px;
}

.nose {
  width: 30px;
  height: 15px;
  border-radius: 15px;
  background: #000;
  position: absolute;
  top: 50px;
  left: 45px;
}

.mouth {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #000;
  position: absolute;
  top: 65px;
  left: 40px;
}

小猪的细节：耳朵、蹄子、尾巴

小猪猪的耳朵大大的，用两个三角形来表示。蹄子小小的，用四个小圆圈来表示。尾巴短短的，用一个尖尖的三角形来表示。

.ear {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 50px solid #ffc0cb;
  position: absolute;
  top: -10px;
}

.left-ear {
  left: -10px;
}

.right-ear {
  left: 90px;
}

.hoof {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  position: absolute;
}

.left-hoof {
  top: 110px;
  left: 20px;
}

.right-hoof {
  top: 110px;
  left: 110px;
}

.tail {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 30px solid #ffc0cb;
  position: absolute;
  top: 75px;
  left: 125px;
}

小猪的姿势：打瞌睡

为了让小猪猪更可爱，我们给他加上一个打瞌睡的姿势。给他闭上眼睛，把头部稍微向右倾斜，身体也微微向后倾斜。

.head {
  transform: rotate(-10deg);
}

.eye {
  display: none;
}

.body {
  transform: rotate(10deg);
}

至此，我们已经用 CSS 成功绘制了一只憨态可掬的小猪猪，它正闭着眼睛，在甜甜地打瞌睡。如果你想让小猪猪动起来，还可以给它加上一些动画效果，让它更生动有趣。