HTML & CSS 绘制兔子图形教程 - 简单易学

以下是一个用 HTML 和 CSS 绘制兔子图形的示例：

HTML 代码：

<div class='rabbit'>
  <div class='ear left'></div>
  <div class='ear right'></div>
  <div class='face'>
    <div class='eye left'></div>
    <div class='eye right'></div>
    <div class='nose'></div>
  </div>
</div>

CSS 代码：

.rabbit {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f2d9e6;
  border-radius: 50%;
}

.ear {
  position: absolute;
  width: 50px;
  height: 100px;
  background-color: #f2d9e6;
  border-radius: 50% 50% 0 0;
  transform: rotate(45deg);
}

.left {
  top: -50px;
  left: 20px;
}

.right {
  top: -50px;
  right: 20px;
  transform: rotate(-45deg);
}

.face {
  position: absolute;
  top: 60px;
  left: 50px;
  width: 100px;
  height: 80px;
  background-color: #fff;
  border-radius: 50%;
}

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

.left {
  left: 20px;
}

.right {
  right: 20px;
}

.nose {
  position: absolute;
  top: 50px;
  left: 40px;
  width: 20px;
  height: 20px;
  background-color: #f2d9e6;
  border-radius: 50%;
  transform: rotate(45deg);
}

该示例使用了 HTML 中的 div 元素和 CSS 中的样式属性来绘制兔子的各个部分，如耳朵、脸、眼睛和鼻子等。通过调整各个部分的位置、大小和颜色等属性，最终实现了一个简单的兔子图形。