非常震撼的纯CSS3人物行走动画

下面我会详细讲解如何制作一份“非常震撼的纯CSS3人物行走动画”的完整攻略。

准备工作

在开始之前，你需要准备好以下内容：

• 明确定位要制作的人物，包括人物的外形尺寸和行走的姿势；
• 一份基础的 HTML 文件，用于展示人物行走动画；
• 一份基础的 CSS 文件，用于定义人物的样式和动画效果。

制作过程

第一步：定义人物的基础样式

我们需要在 CSS 中定义人物的基础样式，包括人物的外形、颜色、边框等。

.person {
  width: 100px;
  height: 150px;
  background-color: #f8d6d6;
  border: 3px solid #f8d6d6;
  position: absolute;
  bottom: 0;
  left: 0;
}

在这里，我们定义了一个名为 .person 的类，它的宽度为 100 像素，高度为 150 像素，背景色和边框颜色都为 #f8d6d6，位置为绝对定位，靠在页面底部的左侧。

第二步：定义人物行走的关键帧动画

接下来，我们需要在 CSS 中定义人物行走的关键帧动画。通过关键帧动画，我们可以定义行走的姿势和步数。

@keyframes walk {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(20px) rotateY(0deg);
  }
  50% {
    transform: translateX(40px) rotateY(0deg);
  }
  75% {
    transform: translateX(20px) rotateY(180deg);
  }
  100% {
    transform: translateX(0) rotateY(180deg);
  }
}

在这里，我们定义了一个名为 walk 的关键帧动画，它包含了从 0% 到 100% 的关键帧。每个关键帧中，我们都定义了人物在对应时刻的状态。

第三步：将关键帧动画应用到人物身上

接下来，我们需要将关键帧动画应用到人物身上。通过 animation 属性和上一步定义的关键帧动画，我们可以让人物行走起来。

.person {
  width: 100px;
  height: 150px;
  background-color: #f8d6d6;
  border: 3px solid #f8d6d6;
  position: absolute;
  bottom: 0;
  left: 0;
  animation: walk 1s ease-in-out infinite;
}

在这里，我们将 walk 这个关键帧动画应用到 .person 这个类上，并设置动画时长为 1 秒，时间函数为 ease-in-out，无限循环。

第四步：添加人物的细节、动作等

在上面三个步骤中，我们已经完成了一个基础的纯 CSS3 人物行走动画。但如果想要让这个动画更加生动，我们可以在上面基础上再进行添加。比如，现在我们可以向人物的头部、手、脚等部位添加一些细节、动作等。

.head {
  width: 30px;
  height: 30px;
  background-color: #f8d6d6;
  position: absolute;
  top: -35px;
  left: 35px;
  border-radius: 50%;
  animation: shake 0.5s ease-in-out infinite;
}

.hand {
  width: 3px;
  height: 30px;
  background-color: #f8d6d6;
  position: absolute;
  top: 0;
  right: 30px;
  animation: waving 0.5s ease-in-out infinite;
}

.foot {
  width: 3px;
  height: 25px;
  background-color: #f8d6d6;
  position: absolute;
  bottom: -25px;
  right: 30px;
  animation: kicking 0.5s ease-in-out infinite;
}

在这里，我们分别定义了 .head、.hand、.foot 三个类，分别用于定义人物的头部、手、脚等部分。并在每个类中，都定义了相应的动画效果，通过关键帧动画，让他们具有不一样的动作。

示例说明

接下来，我会举两个示例来说明这个攻略的操作过程。

示例一：添加一个“跳跃”的动作

对于这个示例，我们需要在原来的基础上，给人物添加一个“跳跃”的动作。具体操作步骤如下：

1. 定义一个跳跃的关键帧动画。

@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-40px);
}
100% {
transform: translateY(0);
}
}

1. 将这个关键帧动画应用到 .person 类上。

.person {
animation: walk 1s ease-in-out infinite, jump 0.5s ease-in-out infinite;
}

这样，我们就可以让人物在行走的基础上，添加一个“跳跃”的动作了。

示例二：添加一个“抖头”的动作

对于这个示例，我们需要在原来的基础上，给人物的头部添加一个“抖头”的动作。具体操作步骤如下：

1. 定义一个抖头的关键帧动画。

@keyframes shake {
0% {
transform: rotate(0);
}
25% {
transform: rotate(5deg);
}
50% {
transform: rotate(-5deg);
}
75% {
transform: rotate(5deg);
}
100% {
transform: rotate(0);
}
}

1. 在 .head 类中，应用这个关键帧动画。

.head {
animation: shake 0.5s ease-in-out infinite;
}

这样，我们就可以让人物在行走的基础上，使头部产生一个“抖头”的动作了。

以上为完成“非常震撼的纯CSS3人物行走动画”的完整攻略，希望可以对你有所帮助。