css制作小黄人

使用CSS绘制小黄人

通过CSS的border-radius、渐变和伪元素等特性可以绘制卡通风格的小黄人形象。以下是关键实现步骤：

HTML结构

<div class="minion">
  <div class="eyes">
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
  <div class="mouth"></div>
</div>

基础样式

.minion {
  position: relative;
  width: 200px;
  height: 300px;
  background: #F9E64F;
  border-radius: 100px 100px 70px 70px;
  box-shadow: inset 0 -20px 0 #E8D748;
}

眼睛区域

.eyes {
  position: absolute;
  top: 70px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.eye {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  border: 3px solid #333;
}

.eye::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  margin: 15px auto;
}

嘴巴设计

.mouth {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 30px;
  background: #333;
  border-radius: 0 0 40px 40px;
}

.mouth::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 10px;
  width: 60px;
  height: 10px;
  background: #F9E64F;
  border-radius: 5px;
}

细节优化

• 添加眼镜框使用box-shadow模拟金属光泽
• 身体部分使用::before伪元素添加蓝色工装裤
• 通过transform: rotate()调整眼睛角度增加生动感

完整实现需约100行CSS代码，可通过调整尺寸参数适配不同场景。建议使用CSS变量便于整体配色修改。