小黄人css制作

2026-03-12 13:00:24CSS

小黄人CSS制作

使用CSS可以创建一个简单的小黄人形象，主要通过圆形、矩形和伪元素组合实现。以下是具体实现方法：

HTML结构

小黄人css制作

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

CSS样式

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

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

.eye {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  position: relative;
}

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

.mouth {
  position: absolute;
  width: 80px;
  height: 30px;
  background-color: #333;
  border-radius: 0 0 40px 40px;
  bottom: 100px;
  left: 60px;
}

.pants {
  position: absolute;
  width: 200px;
  height: 80px;
  background-color: #1E4A9B;
  bottom: 0;
  border-radius: 0 0 20px 20px;
}

添加细节效果

可以通过添加更多CSS属性增强视觉效果：

小黄人css制作

.minion {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.eye {
  border: 3px solid #333;
}

.pants::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 20px;
  background-color: #333;
  top: -10px;
  left: 70px;
  border-radius: 5px;
}

动画效果

为眼睛添加简单动画：

.eye::after {
  animation: blink 3s infinite;
}

@keyframes blink {
  0%, 45%, 55%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
}

响应式调整

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

@media (max-width: 600px) {
  .minion {
    width: 150px;
    height: 225px;
  }
  .eyes {
    top: 50px;
  }
  .eye {
    width: 35px;
    height: 35px;
  }
}