当前位置：首页 > CSS

css制作小黄人

2026-03-11 20:37:11CSS

使用CSS制作小黄人

基础结构

HTML部分需要创建一个容器，用于放置小黄人的各个部分。以下是一个基础的HTML结构：

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

小黄人身体

小黄人的身体通常是黄色的圆柱形，可以通过CSS的border-radius属性实现：

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

.body {
  width: 150px;
  height: 200px;
  background-color: #ffdf00;
  border-radius: 75px 75px 20px 20px;
  position: absolute;
  bottom: 0;
  left: 25px;
}

眼睛部分

小黄人的眼睛是圆形的，通常有一个大圆和一个小圆组成：

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

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

.eye.left {
  left: 0;
}

.eye.right {
  right: 0;
}

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

嘴巴部分

小黄人的嘴巴通常是简单的线条或弧形：

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

头发部分

小黄人的头发可以用简单的线条或形状模拟：

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

整体调整

为了让小黄人看起来更生动，可以添加一些阴影或高光效果：

css制作小黄人

.body::after {
  content: '';
  width: 100px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 25px;
}

通过以上步骤，一个简单的小黄人CSS动画就可以完成。可以根据需要调整颜色、大小和细节，使其更加逼真。