css制作小黄人

2026-01-28 13:33:23CSS

使用CSS绘制小黄人

通过CSS的border-radius、box-shadow等属性可以绘制卡通形象。以下是小黄人的实现代码：

<div class="minion">
  <div class="eye"></div>
  <div class="mouth"></div>
  <div class="hair"></div>
  <div class="overalls"></div>
</div>

.minion {
  position: relative;
  width: 200px;
  height: 300px;
  background-color: #F5E050;
  border-radius: 100px 100px 20px 20px;
  margin: 50px auto;
}

.eye {
  position: absolute;
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  top: 70px;
  left: 70px;
  box-shadow: inset 0 0 0 10px #333, 
              inset 0 0 0 20px white;
}

.mouth {
  position: absolute;
  width: 80px;
  height: 20px;
  background: #333;
  border-radius: 0 0 40px 40px;
  top: 180px;
  left: 60px;
}

.hair {
  position: absolute;
  width: 40px;
  height: 20px;
  background: #333;
  border-radius: 20px 20px 0 0;
  top: 30px;
  left: 80px;
}

.overalls {
  position: absolute;
  width: 180px;
  height: 100px;
  background: #1E88E5;
  border-radius: 0 0 20px 20px;
  bottom: 0;
  left: 10px;
}

添加动画效果

为小黄人添加眨眼动画：

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

.eye {
  animation: blink 3s infinite;
}

响应式调整

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

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

进阶细节处理

添加更多细节使形象更生动：

css制作小黄人

.minion::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 40px;
  background: #1E88E5;
  top: 220px;
  left: 85px;
  border-radius: 10px;
}

通过组合基本几何形状和CSS变换，可以创建出各种卡通形象。调整颜色、尺寸和位置参数可获得不同风格效果。