纯CSS人物行走动画制作教程：手把手教你打造灵动小人效果

来源：站长平台作者：陈平安时间：05-13

导读：本期聚焦于小伙伴创作的《纯CSS人物行走动画制作教程：手把手教你打造灵动小人效果》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《纯CSS人物行走动画制作教程：手把手教你打造灵动小人效果》有用，将其分享出去将是对创作者最好的鼓励。

纯CSS实现独自行走动画：从零构建一个灵动小人

在网页设计中，使用纯CSS实现人物行走动画是一项富有挑战性且极具趣味性的任务。无需借助JavaScript或Canvas，仅通过CSS的变换与关键帧动画，就能让一个由div元素拼凑而成的小人迈开步伐、摆动双臂，呈现出逼真的行走效果。本文将详细拆解这一过程，从基础结构到动画细节，带你一步步打造属于自己的行走小人。

实现原理

行走动画的核心在于模拟人体行走时的循环动作。一个完整的行走周期包括：双腿交替向前迈出、双臂反向摆动、身体重心上下起伏。在CSS中，我们可以通过以下技术实现：

关键帧动画（@keyframes）：定义身体各部件在时间轴上的位置与旋转角度变化。
transform变换：使用 rotate 实现四肢的摆动，使用 translateY 模拟身体起伏。
transform-origin：设置旋转原点（如肩膀、髋部），确保手臂和腿的摆动符合人体关节运动规律。
animation属性：控制动画的时长、循环方式（infinite）以及缓动函数（ease-in-out）。

通过巧妙组合这些技术，就能让静态的div元素“活”起来。

准备工作：构建人物骨架

首先，我们需要用HTML的div元素搭建出一个小人的基本轮廓。小人由以下部分组成：头部、身体、左臂、右臂、左腿、右腿。每个部分都是一个独立的div，通过CSS定位组合在一起。

HTML结构

<div class="walker">
  <!-- 头部 -->
  <div class="head"></div>
  <!-- 身体 -->
  <div class="body"></div>
  <!-- 左臂 -->
  <div class="arm left-arm">
    <div class="upper-arm"></div>
    <div class="forearm"></div>
  </div>
  <!-- 右臂 -->
  <div class="arm right-arm">
    <div class="upper-arm"></div>
    <div class="forearm"></div>
  </div>
  <!-- 左腿 -->
  <div class="leg left-leg">
    <div class="thigh"></div>
    <div class="shin"></div>
  </div>
  <!-- 右腿 -->
  <div class="leg right-leg">
    <div class="thigh"></div>
    <div class="shin"></div>
  </div>
</div>

为了让手臂和腿能够弯曲，我将每个肢体分为两段（上臂/前臂、大腿/小腿），这样在动画中可以实现更自然的摆动。

CSS样式设计

基础样式与容器

首先设置人物的容器以及各部分的尺寸与颜色。为了让小人更生动，可以添加一些圆角、阴影和渐变效果。

/* 容器 - 用于整体定位 */
.walker {
  position: relative;
  width: 100px;
  height: 250px;
  margin: 100px auto;
}

/* 头部 */
.head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: #f0c8a0;
  border-radius: 50%;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

/* 身体 */
.body {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 60px;
  background: #4a90e2;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

/* 手臂通用样式 */
.arm {
  position: absolute;
  top: 40px;
  width: 12px;
}

.left-arm {
  left: 10px;
}

.right-arm {
  right: 10px;
}

.upper-arm {
  width: 12px;
  height: 35px;
  background: #f0c8a0;
  border-radius: 6px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.forearm {
  width: 12px;
  height: 30px;
  background: #f0c8a0;
  border-radius: 6px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  margin-top: 2px;
}

/* 腿部通用样式 */
.leg {
  position: absolute;
  top: 90px;
  width: 14px;
}

.left-leg {
  left: 28px;
}

.right-leg {
  right: 28px;
}

.thigh {
  width: 14px;
  height: 40px;
  background: #4a90e2;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.shin {
  width: 14px;
  height: 40px;
  background: #4a90e2;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  margin-top: 2px;
}

核心动画实现

行走动画的关键在于四肢的交替摆动和身体的起伏。我设计了四个关键帧动画：

walk-cycle：控制身体上下浮动
arm-swing-left / arm-swing-right：控制左右手臂的摆动
leg-swing-left / leg-swing-right：控制左右腿的摆动

/* 身体上下起伏 - 模拟行走时重心的变化 */
@keyframes walk-cycle {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-6px);
  }
}

/* 左臂摆动 */
@keyframes arm-swing-left {
  0%, 100% {
    transform: rotate(-25deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(25deg);
    transform-origin: top center;
  }
}

/* 右臂摆动（与左臂反向） */
@keyframes arm-swing-right {
  0%, 100% {
    transform: rotate(25deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(-25deg);
    transform-origin: top center;
  }
}

/* 左腿摆动 */
@keyframes leg-swing-left {
  0%, 100% {
    transform: rotate(20deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(-20deg);
    transform-origin: top center;
  }
}

/* 右腿摆动（与左腿反向） */
@keyframes leg-swing-right {
  0%, 100% {
    transform: rotate(-20deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(20deg);
    transform-origin: top center;
  }
}

/* 应用动画到各个部件 */
.body {
  animation: walk-cycle 0.8s ease-in-out infinite;
}

.left-arm {
  animation: arm-swing-left 0.8s ease-in-out infinite;
}

.right-arm {
  animation: arm-swing-right 0.8s ease-in-out infinite;
}

.left-leg {
  animation: leg-swing-left 0.8s ease-in-out infinite;
}

.right-leg {
  animation: leg-swing-right 0.8s ease-in-out infinite;
}

为了让手臂和腿的摆动更自然，我还需要给前臂和小腿添加独立的旋转动画，实现“关节弯曲”的效果。

/* 前臂弯曲动画 */
@keyframes forearm-swing-left {
  0%, 100% {
    transform: rotate(-10deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(10deg);
    transform-origin: top center;
  }
}

@keyframes forearm-swing-right {
  0%, 100% {
    transform: rotate(10deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(-10deg);
    transform-origin: top center;
  }
}

/* 小腿弯曲动画 */
@keyframes shin-swing-left {
  0%, 100% {
    transform: rotate(-8deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(8deg);
    transform-origin: top center;
  }
}

@keyframes shin-swing-right {
  0%, 100% {
    transform: rotate(8deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(-8deg);
    transform-origin: top center;
  }
}

/* 应用到具体元素 */
.left-arm .forearm {
  animation: forearm-swing-left 0.8s ease-in-out infinite;
}

.right-arm .forearm {
  animation: forearm-swing-right 0.8s ease-in-out infinite;
}

.left-leg .shin {
  animation: shin-swing-left 0.8s ease-in-out infinite;
}

.right-leg .shin {
  animation: shin-swing-right 0.8s ease-in-out infinite;
}

完整代码示例

下面是一个可以直接运行的HTML文档，包含了上面所有结构的样式。你可以将代码复制到一个空白的HTML文件中，在浏览器中打开即可看到行走的小人。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS行走动画</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f0f4f8;
  font-family: Arial, Helvetica, sans-serif;
}

.walker {
  position: relative;
  width: 100px;
  height: 260px;
}

/* ===== 头部 ===== */
.head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: #f5cba7;
  border-radius: 50%;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
  z-index: 10;
}

/* ===== 身体 ===== */
.body {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 64px;
  background: #5d9df5;
  border-radius: 8px 8px 4px 4px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
  z-index: 5;
  animation: walk-cycle 0.8s ease-in-out infinite;
}

@keyframes walk-cycle {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

/* ===== 手臂 ===== */
.arm {
  position: absolute;
  top: 44px;
  width: 14px;
  z-index: 4;
}

.left-arm {
  left: 6px;
  animation: arm-swing-left 0.8s ease-in-out infinite;
}

.right-arm {
  right: 6px;
  animation: arm-swing-right 0.8s ease-in-out infinite;
}

.upper-arm {
  width: 14px;
  height: 36px;
  background: #f5cba7;
  border-radius: 7px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
}

.forearm {
  width: 14px;
  height: 32px;
  background: #f5cba7;
  border-radius: 7px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
  margin-top: 3px;
}

.left-arm .forearm {
  animation: forearm-swing-left 0.8s ease-in-out infinite;
}

.right-arm .forearm {
  animation: forearm-swing-right 0.8s ease-in-out infinite;
}

@keyframes arm-swing-left {
  0%, 100% { transform: rotate(-30deg); transform-origin: top center; }
  50% { transform: rotate(30deg); transform-origin: top center; }
}

@keyframes arm-swing-right {
  0%, 100% { transform: rotate(30deg); transform-origin: top center; }
  50% { transform: rotate(-30deg); transform-origin: top center; }
}

@keyframes forearm-swing-left {
  0%, 100% { transform: rotate(-12deg); transform-origin: top center; }
  50% { transform: rotate(12deg); transform-origin: top center; }
}

@keyframes forearm-swing-right {
  0%, 100% { transform: rotate(12deg); transform-origin: top center; }
  50% { transform: rotate(-12deg); transform-origin: top center; }
}

/* ===== 腿部 ===== */
.leg {
  position: absolute;
  top: 96px;
  width: 16px;
  z-index: 3;
}

.left-leg {
  left: 24px;
  animation: leg-swing-left 0.8s ease-in-out infinite;
}

.right-leg {
  right: 24px;
  animation: leg-swing-right 0.8s ease-in-out infinite;
}

.thigh {
  width: 16px;
  height: 42px;
  background: #5d9df5;
  border-radius: 8px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
}

.shin {
  width: 16px;
  height: 42px;
  background: #5d9df5;
  border-radius: 8px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
  margin-top: 3px;
}

.left-leg .shin {
  animation: shin-swing-left 0.8s ease-in-out infinite;
}

.right-leg .shin {
  animation: shin-swing-right 0.8s ease-in-out infinite;
}

@keyframes leg-swing-left {
  0%, 100% { transform: rotate(22deg); transform-origin: top center; }
  50% { transform: rotate(-22deg); transform-origin: top center; }
}

@keyframes leg-swing-right {
  0%, 100% { transform: rotate(-22deg); transform-origin: top center; }
  50% { transform: rotate(22deg); transform-origin: top center; }
}

@keyframes shin-swing-left {
  0%, 100% { transform: rotate(-10deg); transform-origin: top center; }
  50% { transform: rotate(10deg); transform-origin: top center; }
}

@keyframes shin-swing-right {
  0%, 100% { transform: rotate(10deg); transform-origin: top center; }
  50% { transform: rotate(-10deg); transform-origin: top center; }
}

/* 地面影子效果 - 增加立体感 */
.walker::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 10px;
  background: rgba(0,0,0,0.08);
  border-radius: 50%;
  animation: shadow-pulse 0.8s ease-in-out infinite;
}

@keyframes shadow-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
  50% { transform: translateX(-50%) scale(0.85); opacity: 0.3; }
}
</style>
</head>
<body>
<div class="walker">
  <div class="head"></div>
  <div class="body"></div>
  <div class="arm left-arm">
    <div class="upper-arm"></div>
    <div class="forearm"></div>
  </div>
  <div class="arm right-arm">
    <div class="upper-arm"></div>
    <div class="forearm"></div>
  </div>
  <div class="leg left-leg">
    <div class="thigh"></div>
    <div class="shin"></div>
  </div>
  <div class="leg right-leg">
    <div class="thigh"></div>
    <div class="shin"></div>
  </div>
</div>
</body>
</html>

优化与扩展建议

为了让行走动画更加生动逼真，可以从以下几个方面进行优化和扩展：

调整动画时长与缓动函数：不同的行走节奏可以通过修改 animation-duration 和 animation-timing-function 来实现。较慢的行走（1.2秒）显得悠闲，较快的行走（0.6秒）显得急促。
添加旋转角度变化：在关键帧中增加更多的中间状态，让四肢的摆动轨迹更接近自然弧线，而不是简单的线性摆动。
整体移动：给 .walker 容器添加 translateX 动画，让小人真正“走”过屏幕，而不是原地踏步。
细节装饰：可以给头部添加眼睛、头发，给身体添加衣服纹理，甚至让手臂和腿的粗细不同，让小人更有特色。
响应式适配：使用相对单位（如 vw、vh、em）替代固定像素，让小人能够适配不同屏幕尺寸。

让小人横穿屏幕

如果你希望小人从屏幕一侧走到另一侧，可以给 .walker 容器添加一个移动动画：

@keyframes move-across {
  0% {
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(calc(100vw + 200px));
  }
}

.walker {
  animation: move-across 8s linear infinite;
}

将这段代码添加到样式表中，小人就会从左侧走到右侧，形成一个完整的行走场景。

结语

通过纯CSS实现人物行走动画，不仅锻炼了我们对CSS动画属性的掌控能力，也加深了对人体运动规律的理解。整个过程无需一行JavaScript代码，仅凭CSS的关键帧动画、变换和定位，就能创造出栩栩如生的动态效果。希望本文的讲解能给你带来启发，让你在CSS动画的世界里走得更远。

CSS动画 CSS_keyframes 行走动画人物动画前端动画教程

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。