当前位置：首页 > CSS

css制作人

2026-03-12 12:44:08CSS

CSS制作人物形象的方法

使用CSS绘制人物形象主要依赖于div元素的组合、CSS形状变换和动画效果。以下是几种常见的方法：

基础形状组合 通过矩形、圆形等基本形状组合出人物轮廓。例如头部可以用border-radius: 50%实现圆形，身体用矩形组合：

.head {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #FFD700;
}
.body {
  width: 60px;
  height: 120px;
  background: #4682B4;
}

伪元素应用 利用::before和::after伪元素添加细节，如眼睛、耳朵等：

.eye::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 10px;
  background: black;
  border-radius: 50%;
}

CSS Clip-path 通过裁剪路径创建复杂形状，适合制作特殊轮廓的人物：

.hat {
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
  background: #8B4513;
}

CSS动画 添加眨眼、挥手等简单动画：

@keyframes blink {
  0%, 100% { height: 10px; }
  50% { height: 2px; }
}
.eye {
  animation: blink 3s infinite;
}

完整示例代码

以下是一个简单的人物CSS实现：

css制作人

<div class="character">
  <div class="head"></div>
  <div class="body"></div>
  <div class="eye left-eye"></div>
  <div class="eye right-eye"></div>
</div>

<style>
.character {
  position: relative;
  width: 200px;
  height: 300px;
}
.head {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #FFD700;
  position: absolute;
  top: 20px;
  left: 60px;
}
.body {
  width: 40px;
  height: 100px;
  background: #4682B4;
  position: absolute;
  top: 100px;
  left: 80px;
}
.eye {
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 50px;
}
.left-eye { left: 75px; }
.right-eye { left: 115px; }
</style>