css制作鸟

使用CSS绘制鸟的步骤

通过CSS的::before和::after伪元素结合border-radius和transform属性，可以创建简单的鸟形状。以下是实现方法：

HTML结构

<div class="bird"></div>

CSS样式

.bird {
  width: 60px;
  height: 40px;
  background-color: #3498db;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
}

.bird::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #2c3e50;
  border-radius: 50%;
  top: 10px;
  left: 15px;
}

.bird::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 10px solid #e74c3c;
  transform: rotate(-30deg);
  top: 15px;
  left: 45px;
}

动画效果增强

添加翅膀扇动动画效果：

@keyframes flap {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
  100% { transform: rotate(0deg); }
}

.bird {
  animation: flap 1s infinite;
}

进阶版本（带尾巴）

更复杂的鸟形状实现：

.bird-advanced {
  width: 80px;
  height: 60px;
  background-color: #9b59b6;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
}

.bird-advanced::before {
  /* 头部和眼睛样式 */
}

.bird-advanced::after {
  /* 喙部样式 */
}

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

这些方法通过组合基本CSS形状和动画，可以创建出不同风格的鸟图形。调整颜色、尺寸和形状参数可获得各种视觉效果。