用 css3 画鸽子

好的，以下是用 CSS3 画鸽子的示例代码：

HTML 代码：

<div class="dove">
  <div class="head"></div>
  <div class="body"></div>
  <div class="tail"></div>
  <div class="wing"></div>
</div>

CSS 代码：

.dove {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f2f2f2;
}

.head {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #c4c4c4;
}

.body {
  position: absolute;
  top: 35px;
  left: 30px;
  width: 20px;
  height: 30px;
  border-radius: 50%;
  background-color: #c4c4c4;
}

.tail {
  position: absolute;
  top: 55px;
  left: 15px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #c4c4c4;
}

.wing {
  position: absolute;
  top: 30px;
  right: -10px;
  width: 20px;
  height: 40px;
  border-radius: 50%;
  background-color: #c4c4c4;
  transform: rotate(-45deg);
  transform-origin: right center;
  animation: fly 2s ease-in-out infinite alternate;
}

@keyframes fly {
  from {
    transform: rotate(-45deg) translateX(0);
  }
  to {
    transform: rotate(-45deg) translateX(20px);
  }
}

解释一下：

- 使用 `div` 元素来创建鸽子，其中 `.dove` 为鸽子的主体，`.head`、`.body`、`.tail`、`.wing` 分别为鸽子的头部、身体、尾巴、翅膀。
- 使用 `position: absolute` 让各个元素相对于 `.dove` 定位。
- 使用 `border-radius: 50%` 让元素变成圆形。
- 使用 `background-color` 设置元素的颜色。
- 使用 `transform` 和 `transform-origin` 控制翅膀的旋转和平移。
- 使用 `animation` 控制翅膀的飞动。

希望这个示例对你有所帮助！