css制作小黄人

使用CSS绘制小黄人

以下是通过纯CSS实现小黄人（Minions）效果的代码示例，包含身体、眼镜、衣服等关键部分：

<div class="minion">
  <div class="body"></div>
  <div class="eyes">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="goggles"></div>
  </div>
  <div class="mouth"></div>
  <div class="pants"></div>
  <div class="strap"></div>
</div>

.minion {
  position: relative;
  width: 200px;
  height: 300px;
  margin: 50px auto;
}

.body {
  width: 180px;
  height: 220px;
  background-color: #F9E64F;
  border-radius: 90px 90px 30px 30px;
  position: absolute;
  bottom: 0;
  left: 10px;
}

.eyes {
  position: absolute;
  top: 40px;
  left: 30px;
  width: 140px;
  height: 80px;
}

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

.eye.left {
  left: 0;
}

.eye.right {
  right: 0;
}

.eye::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: #3A3A3A;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  left: 15px;
}

.goggles {
  width: 140px;
  height: 70px;
  border: 8px solid #7A7A7A;
  border-radius: 40px;
  position: absolute;
  top: -5px;
}

.mouth {
  width: 60px;
  height: 20px;
  background: #3A3A3A;
  border-radius: 0 0 30px 30px;
  position: absolute;
  top: 150px;
  left: 70px;
}

.pants {
  width: 180px;
  height: 60px;
  background: #1E4C7B;
  border-radius: 0 0 30px 30px;
  position: absolute;
  bottom: 0;
  left: 10px;
}

.strap {
  width: 180px;
  height: 20px;
  background: #1E4C7B;
  position: absolute;
  bottom: 60px;
  left: 10px;
}

关键实现技巧

• 圆角边框：使用border-radius创建身体的椭圆形和眼镜的圆形效果
• 伪元素：通过::after添加眼球的小黑点
• 绝对定位：所有元素采用绝对定位实现层叠效果
• 颜色选择：典型的黄蓝配色（#F9E64F和#1E4C7B）

动画效果增强

添加眨眼动画效果：

@keyframes blink {
  0%, 100% { height: 50px; }
  50% { height: 5px; }
}

.eye {
  animation: blink 3s infinite;
}

响应式调整

通过媒体查询适配不同屏幕尺寸：

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

这种方法完全使用CSS实现，无需任何图像资源，通过调整参数可以改变小黄人的大小、表情等特征。