用CSS制作企鹅

使用CSS绘制企鹅

通过CSS的border-radius、box-shadow和transform等属性，可以创建简单的企鹅图形。以下是实现步骤：

HTML结构

<div class="penguin">
  <div class="head"></div>
  <div class="body"></div>
  <div class="wing left"></div>
  <div class="wing right"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="beak"></div>
  <div class="feet left"></div>
  <div class="feet right"></div>
</div>

CSS样式

.penguin {
  position: relative;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

.head {
  position: absolute;
  width: 100px;
  height: 80px;
  background: black;
  border-radius: 50% 50% 45% 45%;
  top: 20px;
  left: 100px;
}

.body {
  position: absolute;
  width: 180px;
  height: 250px;
  background: black;
  border-radius: 45% 45% 40% 40%;
  top: 80px;
  left: 60px;
}

.wing {
  position: absolute;
  width: 50px;
  height: 120px;
  background: black;
  border-radius: 50%;
}

.wing.left {
  transform: rotate(30deg);
  top: 120px;
  left: 30px;
}

.wing.right {
  transform: rotate(-30deg);
  top: 120px;
  right: 30px;
}

.eye {
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  top: 40px;
}

.eye.left {
  left: 90px;
}

.eye.right {
  right: 90px;
}

.beak {
  position: absolute;
  width: 30px;
  height: 20px;
  background: orange;
  border-radius: 50%;
  top: 60px;
  left: 135px;
  transform: rotate(45deg);
}

.feet {
  position: absolute;
  width: 40px;
  height: 15px;
  background: orange;
  border-radius: 50%;
  bottom: 20px;
}

.feet.left {
  left: 100px;
}

.feet.right {
  right: 100px;
}

添加动画效果

通过CSS动画让企鹅更生动：

.penguin {
  animation: wobble 2s infinite alternate;
}

@keyframes wobble {
  from { transform: rotate(0deg); }
  to { transform: rotate(5deg); }
}

.wing.left {
  animation: flap-left 1s infinite alternate;
}

.wing.right {
  animation: flap-right 1s infinite alternate;
}

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

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

响应式调整

使用媒体查询确保在不同屏幕尺寸下正常显示：

@media (max-width: 500px) {
  .penguin {
    transform: scale(0.7);
  }
}