用CSS3绘制小黄人并加上动画，本质上是在用盒模型拼装几何图形。我们把一个黄色圆角矩形作为身体，两个白色圆圈当眼白，中间放灰色镜框，再补一条蓝色背带裤。动画部分交给@keyframes，让眼睛左右看、整体轻微晃动，观感就活了。下面从结构搭建讲起。
一、HTML结构如何拆解小黄人部件
小黄人虽然是个卡通角色，但放到网页里就是一堆嵌套的div。最外层是一个容器，用来限制整体大小与定位上下文。里面分别放身体、眼睛组、镜框、嘴巴和背带裤。这种拆分方式和画素描时先打草稿再填细节是一致的，只要每个部件独立成节点，后面写CSS才能精准控制。
很多初学者喜欢把所有样式写在一个div上，结果调一个圆角就影响了嘴巴位置。正确做法是身体归身体，眼睛归眼睛。比如眼睛组用一个相对定位的包裹层，内部两个眼白用绝对定位左右分开，镜框再用伪元素或单独标签盖上去。这样层级清晰，动画也能只作用于某一层而不波及其它。
下面是一段基础HTML，没有加任何类样式，只是把零件摆好。注意这里全部使用div，没有语义化标签，因为纯展示型动画角色不需要屏幕阅读器去读结构。
<div class="minion">
<div class="body"></div>
<div class="eyes">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="goggle"></div>
</div>
<div class="mouth"></div>
<div class="pants"></div>
</div>
二、用CSS3形状与定位画出静态小黄人
静态造型靠的是border-radius和背景色。身体是一个宽高接近的矩形，但上下用大圆角变成胶囊形，背景填黄色。眼睛是白色正圆，镜框用灰色边框的椭圆跨在两只眼睛上，制造出连体眼镜的效果。背带裤用蓝色矩形遮挡身体下半部分，再用两条细长方块当背带。
定位方面，外层.minion设置position: relative，内部零件全部position: absolute并以百分比或像素对齐。比如眼睛组放在身体上部三分之一处，左右眼各偏移一定距离。镜框宽度要覆盖两只眼，所以left取负值或居中处理。嘴巴用一条扁椭圆配深色边框表示微笑。以下样式可直接运行，变量值可按喜好微调。
.minion {
position: relative;
width: 200px;
height: 320px;
margin: 50px auto;
}
.body {
position: absolute;
width: 200px;
height: 300px;
background: #ffd400;
border-radius: 100px;
top: 0;
left: 0;
}
.eyes {
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 60px;
}
.eye {
position: absolute;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
top: 0;
}
.eye.left { left: 0; }
.eye.right { right: 0; }
.goggle {
position: absolute;
width: 130px;
height: 60px;
border: 6px solid #888;
border-radius: 40px;
top: -5px;
left: -5px;
box-sizing: border-box;
}
.mouth {
position: absolute;
width: 80px;
height: 20px;
border: 3px solid #5a4a00;
border-radius: 0 0 40px 40px;
top: 150px;
left: 50%;
transform: translateX(-50%);
}
.pants {
position: absolute;
width: 200px;
height: 90px;
background: #2b5c9e;
border-radius: 0 0 100px 100px;
bottom: 0;
left: 0;
}
上述代码画出的已经是一个静止的小黄人。如果只在浏览器打开，它会乖乖站着。但CSS3的强项在于不依赖JS就能让画面动起来，接下来我们看动画怎么写。
三、使用@keyframes实现眼睛转动与身体摇摆
动画核心是把变化过程拆成关键帧。眼睛转动可以定义一个eye-move，从translateX(0)到translateX(10px)再回来，制造眼球左右瞟的效果。身体摇摆用swing，让整个.minion做小角度rotate，配合transform-origin底部，看起来像在不稳地站着。
为了让动画连贯且不生硬，我们给不同部件设不同duration和iteration-count。眼睛快一点、无限循环；身体慢一点、也无限循环但错开延迟。下面代码展示如何绑定。注意动画名要和keyframes定义一致，浏览器才会生效。
@keyframes eye-move {
0% { transform: translateX(0); }
50% { transform: translateX(12px); }
100% { transform: translateX(0); }
}
@keyframes swing {
0% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}
.eye {
animation: eye-move 1.2s infinite ease-in-out;
}
.minion {
transform-origin: bottom center;
animation: swing 2.5s infinite ease-in-out;
}
把这段CSS接在前面样式后面，小黄人就会自己晃并转眼。若想加更多细节，比如手臂摆动，只需补一个div写类似keyframes即可。这种纯CSS方案好处是性能好，不占主线程，适合加载动画或趣味页头。掌握了部件拆分与关键帧绑定，你也能画出其它角色并赋予性格化动作。
CSS3小黄人绘制keyframes动画修改时间：2026-08-17 10:40:28