css制作鸟

使用CSS绘制鸟的步骤

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

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

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

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

.bird::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  top: -5px;
  right: -5px;
  transform: rotate(30deg);
}

添加动画效果

通过CSS动画让鸟看起来像在飞翔：

.bird {
  animation: fly 2s infinite alternate;
}

@keyframes fly {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-20px);
  }
}

进阶版本（带翅膀）

更复杂的鸟设计可以包含拍打的翅膀：

<div class="bird-advanced">
  <div class="wing left"></div>
  <div class="wing right"></div>
</div>

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

.wing {
  position: absolute;
  width: 25px;
  height: 15px;
  background-color: #c0392b;
  border-radius: 50%;
  top: 10px;
}

.left {
  left: -15px;
  transform-origin: right center;
  animation: flap-left 0.5s infinite alternate;
}

.right {
  right: -15px;
  transform-origin: left center;
  animation: flap-right 0.5s infinite alternate;
}

@keyframes flap-left {
  to {
    transform: rotate(30deg);
  }
}

@keyframes flap-right {
  to {
    transform: rotate(-30deg);
  }
}

响应式调整

使用CSS变量让鸟的尺寸可以灵活调整：

.bird {
  --size: 50px;
  width: var(--size);
  height: calc(var(--size) * 0.6);
}

@media (max-width: 600px) {
  .bird {
    --size: 30px;
  }
}