用CSS制作企鹅

使用CSS绘制企鹅

创建一个企鹅形象的CSS图形可以通过纯CSS和HTML实现，结合border-radius、transform和伪元素等属性。

HTML结构

<div class="penguin">
  <div class="face"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="beak"></div>
  <div class="belly"></div>
  <div class="foot left"></div>
  <div class="foot right"></div>
</div>

CSS样式

.penguin {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: black;
  border-radius: 50%;
  margin: 50px auto;
}

.face {
  position: absolute;
  width: 100px;
  height: 80px;
  background-color: white;
  border-radius: 50% 50% 0 0;
  top: 20px;
  left: 50px;
}

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

.eye.left {
  left: 70px;
}

.eye.right {
  right: 70px;
}

.beak {
  position: absolute;
  width: 30px;
  height: 20px;
  background-color: orange;
  border-radius: 50%;
  top: 70px;
  left: 85px;
}

.belly {
  position: absolute;
  width: 120px;
  height: 100px;
  background-color: white;
  border-radius: 50%;
  bottom: 20px;
  left: 40px;
}

.foot {
  position: absolute;
  width: 30px;
  height: 15px;
  background-color: orange;
  border-radius: 0 0 50% 50%;
  bottom: 0;
}

.foot.left {
  left: 60px;
}

.foot.right {
  right: 60px;
}

添加动画效果

让企鹅可以左右摇摆，增加趣味性：

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

.penguin {
  animation: wobble 2s infinite ease-in-out;
}

调整细节

• 使用box-shadow为企鹅添加立体感。
• 通过::before和::after伪元素完善翅膀或其它细节。
• 调整颜色和尺寸以匹配不同风格的企鹅设计。

通过组合基本形状和CSS属性，可以创建出多样化的卡通或写实风格企鹅图形。