css画一只可爱的小柯基

前言

最近隔壁公司买了一只小柯基，经常跑到我们公司来玩，非常可爱。今天来用css实现一只可爱的小柯基吧！

效果展示

具体实现

小柯基有小小的脑袋，圆圆的眼睛，长长的耳朵，鼻子，嘴巴，短短的腿，身体、尾巴。先把它的身体结构搭建好，然后用css一点点实现身体的各个部位

1. 身体结构（html）

可以分成两大部分，头部（包括眼睛、耳朵、鼻子、嘴巴）和身体（包括尾巴、腿）

<div class="dog">
  <!-- 头部 -->
  <div class="head">
    <!-- 耳朵 -->
    <div class="ear ear-left"></div>
    <div class="ear ear-right"></div>
    <!-- 鼻子 -->
    <div class="nose"></div>	
    <!-- 嘴巴 -->
    <div class="mouth"></div>
  <div class="face">
    <!-- 眼睛 -->
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
  </div>
</div>
<!-- 身体 -->
<div class="body">
  <!-- 四条腿 -->
  <div class="legs">
    <div class="legs__front legs__front-left"></div>
    <div class="legs__front legs__front-right"></div>
    <div class="legs__back legs__back-left"></div>
    <div class="legs__back legs__back-right"></div>
  </div>
  <!-- 尾巴 -->
  <div class="tail"></div>
</div>
</div>

2. css画小柯基的头部部分

a. 整体的头部,设置宽高占位

.head{
  width: 100px;
  height: 80px;
  position: relative;
}

b. 两只长长的耳朵

使用绝对定位，控制左右两只耳朵分别所在头部的位置；border-radius属性实现耳朵尖尖的效果；rotate控制耳朵倾斜展示

.ear {
  position: absolute;
  background-color: #f79e38;
  height: 60px;
  width: 24px;
  z-index: 8;
}

.ear-left {
  top: -35%;
  left: -5px;
  border-top-left-radius: 68% 100%;
  border-top-right-radius: 100% 100%;
  transform: rotate(-40deg);

}

.ear-left::after {
  content: '';
  width: 60%;
  height: 90%;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  border-top-left-radius: 68% 100%;
  border-top-right-radius: 100% 100%;
  background-color: #fff;
}

.ear-right {
  top: -39%;
  right: 0;
  border-top-left-radius: 56% 100%;
  border-top-right-radius: 100% 100%;
  transform: rotate(-320deg);
}

.ear-right::after {
  content: '';
  width: 60%;
  height: 90%;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  border-top-left-radius: 56% 100%;
  border-top-right-radius: 100% 100%;
  background-color: #fff;
}

c. 实现脸部，宽高和整体头部一致，因为脸是圆圆的，所以使用border-radius属性做成圆角的形状；并使用伪元素做出脸部左右两侧的毛色

.face {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 40px;
  z-index: 9;
  overflow: hidden;
}

.face::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  height: 50px;
  border-radius: 40px 0px 27px 0px;
  background-color: #f79e38;
}

.face::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 50px;
  border-radius: 0px 38px 5px 28px;
  background-color: #f79e38;
}

d. 圆圆的眼睛

.eye {
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 35%;
  z-index: 10;
}

.eye-left {
  left: 22%;
}

.eye-right {
  right: 42%;
}

e. 鼻子

使用伪元素实现黑色的鼻子，border-radius属性改变它的形状，并整体旋转小小的角度，实现一个立体的效果

.nose {
  position: absolute;
  left: -10%;
  bottom: 2%;
  width: 80px;
  height: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 40px;
  background-color: #fff;
  z-index: 10;
  transform: rotate(4deg);
}

.nose::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 8px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 6px;
  background-color: #1C3130;
}

f. 嘴巴

.mouth {
  position: absolute;
  bottom: 15px;
  left: -5px;
  width: 11px;
  height: 6px;
  border-radius: 50%;
  border-bottom: 4px solid #1C3130;
  z-index: 11;
  transform: rotate(10deg);
}

3. css画小柯基的身体部分

a. 整体的身体

设置宽高占位；绝对定位控制身体展示在哪个位置；border-radius属性实现身体的形状；使用伪元素实现白色的前襟

.body {
  position: absolute;
  left: 40px;
  top: 34px;
  width: 200px;
  height: 90px;
  background-color: #f79e38;
  border-top-right-radius: 17% 40%;
  border-top-left-radius: 25%;
  border-bottom-right-radius: 5% 13%;
  border-bottom-left-radius: 25% 40%;
  z-index: 4;
}

.body::after {
  content: '';
  position: absolute;
  width: 30%;
  height: 90%;
  background-color: #fff;
  border-top-right-radius: 10%;
  border-top-left-radius: 40%;
  border-bottom-right-radius: 40%;
  border-bottom-left-radius: 62%;
}

b. 四条小短腿

腿部是黄色的毛毛，伪元素实现白色的脚部

.legs {
  position: absolute;
  top: 97%;
  left: 0;
  width: 100%;
  height: 30%;
  z-index: 3;
}

.legs__front,
.legs__back {
  width: 10%;
  height: 100%;
  background-color: #f79e38;
  position: absolute;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
}

.legs__front::after,
.legs__back::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 100%;
  height: 49%;
  background-color: #fff;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
}

.legs__front-left {
  left: 38%;
  transform: rotate(1deg);
}

.legs__front-right {
  left: 20%;
  transform: rotate(-4deg);
}

.legs__back-left {
  left: 69%;
  transform: rotate(-7deg);
}

.legs__back-right {
  left: 85%;
  transform: rotate(2deg);
}

c.短短的尾巴

.tail {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 20px;
  border-radius: 10px;
  background-color: #f79e38;
  transform: rotate(-30deg);
}

根据以上的代码，就可以简单实现一只可爱的小柯基了