css制作鸟

使用CSS绘制鸟的步骤

通过CSS的border-radius、transform和伪元素等属性，可以绘制简化的鸟类图形。以下是两种常见方法：

基础圆形组合法

通过多个圆形元素拼接成鸟的身体和头部：

<div class="bird">
  <div class="body"></div>
  <div class="head"></div>
  <div class="wing"></div>
</div>

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

.body {
  width: 60px;
  height: 60px;
  background: #3498db;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 20px;
}

.head {
  width: 30px;
  height: 30px;
  background: #2980b9;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50px;
}

.wing {
  width: 40px;
  height: 20px;
  background: #1abc9c;
  border-radius: 20px;
  position: absolute;
  top: 30px;
  left: 10px;
  transform: rotate(-30deg);
}

单元素绘制法

使用单个元素配合::before和::after伪元素：

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

.bird-simple {
  width: 40px;
  height: 30px;
  background: #e74c3c;
  border-radius: 50% 50% 0 0;
  position: relative;
}

.bird-simple::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 15px;
  background: #c0392b;
  border-radius: 50%;
  top: -10px;
  left: 25px;
}

.bird-simple::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 10px;
  background: #d35400;
  border-radius: 10px;
  bottom: 5px;
  left: 5px;
  transform: rotate(20deg);
}

添加动画效果

让鸟的翅膀扇动：

.wing {
  animation: flap 0.5s infinite alternate;
}

@keyframes flap {
  from { transform: rotate(-20deg); }
  to { transform: rotate(-40deg); }
}

进阶技巧

• 使用clip-path创建更复杂的形状
• 添加box-shadow表现羽毛层次
• 通过gradient背景实现颜色渐变
• 结合SVG实现更精细的细节

通过调整尺寸、颜色和定位参数，可以创建不同风格的鸟类图形。CSS绘图的关键在于对基本几何形状的组合与变形。