CSS绘制栩栩如生的可爱小柯基

2023-09-17 10:16:04

前言

柯基犬是一种非常可爱的宠物犬，凭借其矮小的身躯、大大的眼睛和蓬松的尾巴，赢得了众多人的喜爱。今天，我们就来利用CSS的强大功能，绘制一只栩栩如生的可爱小柯基。通过本教程，您将学习到如何使用CSS创建各种形状、颜色和纹理，以及如何将它们组合成一个完整的图形。快来尝试一下吧！

代码实现

<style>
/* 柯基的身体 */
.body {
  width: 300px;
  height: 200px;
  background-color: #e6b980;
  border-radius: 50% 50% 0 0;
  position: relative;
}

/* 柯基的尾巴 */
.tail {
  width: 100px;
  height: 100px;
  background-color: #e6b980;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 200px;
}

/* 柯基的头 */
.head {
  width: 100px;
  height: 100px;
  background-color: #e6b980;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 100px;
}

/* 柯基的眼睛 */
.eye {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  left: 40px;
}

/* 柯基的鼻子 */
.nose {
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 60px;
  left: 55px;
}

/* 柯基的嘴巴 */
.mouth {
  width: 50px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 80px;
  left: 25px;
}

/* 柯基的耳朵 */
.ear {
  width: 50px;
  height: 50px;
  background-color: #e6b980;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 75px;
}

/* 柯基的腿 */
.leg {
  width: 20px;
  height: 100px;
  background-color: #e6b980;
  border-radius: 50%;
  position: absolute;
  top: 150px;
  left: 100px;
}
</style>

<div class="body"></div>
<div class="tail"></div>
<div class="head"></div>
<div class="eye"></div>
<div class="eye"></div>
<div class="nose"></div>
<div class="mouth"></div>
<div class="ear"></div>
<div class="ear"></div>
<div class="leg"></div>
<div class="leg"></div>
<div class="leg"></div>
<div class="leg"></div>