前言
这次趁着周末休息的时间，又弄了一个新的动画效果，用 CSS实现的一个漫步小人。整个实现过程比较简单，大家可以先看到下面的效果预览部分，十分简单，没有花里胡哨的技巧。话不多说，咱们直接进入主题。
效果预览
最终实现的相关效果如下。
HTML部分
首先我们看到HTML部分，创建一个黑色简笔人物（火柴人），相关代码如下。
<figure class="man">
<div class="head"></div>
<div class="body"></div>
<div class="feet"></div>
</figure>
这里总共包含三个部分：头部、身体和脚部，使用figure作为容器，类名为"man"，并包含三个 <div> 元素，分别代表火柴人的不同部位。
使用伪元素来代表火柴人的脚部， ::before 和 ::after 分别创建左脚和右脚，形状类似鞋子（border-radius: 1em 80% 0.4em 0.4em），最后使用 animation 实现交替行走动画，这里结合CSS动画，就可以实现了一个黑色火柴人行走的动画，接下来就会来介绍CSS是如何实现的。
CSS部分
首先我们看到类名man的样式，相关代码如下。
.man {
font-size: 10px;
width: 12em;
height: 33em;
position: relative;
color: black;
}
.man::before {
content: '';
position: absolute;
width: 12em;
height: 0.8em;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
bottom: -0.2em;
left: -3em;
animation: shadow-animate 2s ease-in-out infinite;
}
@keyframes shadow-animate {
50% {
transform: scale(1.15);
}
}
这里定义了一个名为 .man 的CSS类，它是一个火柴人（简笔人物）的容器，并添加了一个阴影效果。
animation: shadow-animate 2s ease-in-out infinite 定义了一个名为 shadow-animate 的动画，持续时间2秒，缓动函数ease-in-out（平滑加速减速），并且无限循环（infinite）。
.man 是火柴人的容器，定义了大小和定位方式。.man::before 创建了一个椭圆形半透明阴影，并添加了呼吸动画（放大缩小）。火柴人行走时，脚下的阴影会有节奏地缩放，增强动画的真实感。
.head {
position: absolute;
width: 7em;
height: 7em;
background-color: currentColor;
border-radius: 50%;
right: 0;
}
.body {
position: absolute;
width: 6.2em;
height: 14.4em;
background-color: currentColor;
border-radius: 100% 20% 0 0;
top: 7em;
}
.head,
.body {
animation: body-animation 4s ease-in-out infinite;
}
@keyframes body-animation {
0%, 100% {
transform: translateY(0) skewX(-2deg);
}
25%, 75% {
transform: translateY(0.5em) skewX(0deg);
}
50% {
transform: translateY(0) skewX(0deg);
}
}
这里定义了火柴人的头部（.head） 和身体（.body） 的样式及动画效果，使其在行走时呈现自然的摆动。
并且定义了一个动画，持续时间4秒，并无限循环（infinite）。在0%, 100% （开始/结束），垂直方向无偏移，水平方向向左倾斜2度（模拟行走时身体轻微侧倾）。在25%, 75% （步伐中间阶段）时，下沉5px（模拟脚部着地时的重心下移），并且取消倾斜（身体保持直立）。在50% （步伐切换点）时，恢复原始位（translateY(0)），并且无倾斜（skewX(0deg)）。
这样呈现的最终动画效果就是行走时身体会轻微左右倾斜和上下移动。
此动画需与脚部动画（feet-animation）配合，才能完整模拟行走动作。接下来便是脚部动画了，相关代码如下。
.feet::before,
.feet::after {
content: '';
position: absolute;
width: 4em;
height: 1.4em;
background-color: currentColor;
border-radius: 1em 80% 0.4em 0.4em;
bottom: 0;
left: -1.6em;
animation: feet-animation 3s linear infinite;
}
.feet::after {
animation-delay: 1.5s;
}
@keyframes feet-animation {
20% {transform: translateX(3.4em) translateY(-1.6em) rotate(-4deg);}
30% {transform: translateX(4.6em) translateY(-1em) rotate(0deg);}
40% {transform: translateX(5.6em) translateY(-0.3em) rotate(4deg);}
45% {transform: translateX(5.6em) translateY(0) rotate(0deg);}
}
这里定义了火柴人的脚部动画，通过CSS伪元素 ::before 和 ::after 创建两只脚，并实现交替迈步的行走效果。两只脚共用同一动画，但 ::after（右脚）延迟 1.5秒（动画周期的一半），实现左右脚交替迈步的效果。
对于动画部分，在20% 阶段（抬脚），向右移动 34px（向前迈步），向上抬起 16px（模拟脚离地），最后逆时针旋转4度（脚尖微微上翘）。在30% 阶段（迈步中段） ，继续右移（46px），高度降低（10px），旋转归零（脚放平）。在40% 阶段（落脚前），右移到最大距离（56px），轻微下沉（3px），顺时针旋转4度（脚跟着地）。在45%~100% 阶段（着地静止），保持最终位置（56px），完全落地（translateY(0)），无旋转。
左脚和右脚交替执行这些动作，后撤 → 抬脚 → 迈步 → 落脚 → 静止，循环往复。
所以综上所述，这个动画创造了一个简约风格的人物行走动画，通过身体轻微摆动、脚部交替移动和阴影变化，营造出流畅的行走效果。所有动画都是无限循环的，使用不同的时间周期和延迟来创造更自然的运动节奏。
总结
以上就是整个效果的实现过程了，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
