小黄人css制作

小黄人CSS制作方法

使用CSS绘制小黄人需要结合多个HTML元素和CSS样式，以下是详细步骤：

基础结构

创建HTML结构，使用多个div元素构建小黄人的各个部分：

<div class="minion">
  <div class="body"></div>
  <div class="eyes">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="pupil left"></div>
    <div class="pupil right"></div>
  </div>
  <div class="mouth"></div>
  <div class="hair"></div>
  <div class="overalls"></div>
</div>

主体样式

设置小黄人主体样式：

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

.body {
  position: absolute;
  width: 180px;
  height: 220px;
  background-color: #F5E050;
  border-radius: 90px 90px 30px 30px;
  top: 50px;
  left: 10px;
}

眼睛部分

创建眼睛和瞳孔：

.eyes {
  position: absolute;
  top: 70px;
  left: 50px;
  width: 100px;
  height: 50px;
}

.eye {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  border: 2px solid #333;
}

.left { left: 0; }
.right { left: 50px; }

.pupil {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #333;
  border-radius: 50%;
  top: 12px;
}

.pupil.left { left: 12px; }
.pupil.right { left: 62px; }

嘴巴和头发

添加嘴巴和头发样式：

.mouth {
  position: absolute;
  width: 60px;
  height: 20px;
  border-bottom: 3px solid #333;
  border-radius: 0 0 30px 30px;
  top: 160px;
  left: 70px;
}

.hair {
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: #333;
  top: 40px;
  left: 50px;
  border-radius: 10px 10px 0 0;
}

工装裤

创建工装裤部分：

.overalls {
  position: absolute;
  width: 180px;
  height: 80px;
  background-color: #3366CC;
  top: 200px;
  left: 10px;
  border-radius: 0 0 30px 30px;
}

.overalls::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 30px;
  background-color: #3366CC;
  top: -20px;
  left: 30px;
  border-radius: 10px 10px 0 0;
}

.overalls::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 30px;
  background-color: #3366CC;
  top: -20px;
  right: 30px;
  border-radius: 10px 10px 0 0;
}

动画效果

添加简单的动画使小黄人更生动：

.pupil {
  animation: blink 3s infinite;
}

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

这些CSS代码组合起来可以创建一个基本的小黄人形象。可以根据需要调整尺寸、颜色和位置以获得更精确的效果。