css动画实现奔跑的北极熊，代码示例，一键运行！

前端

2023-12-02 19:32:05

掌握 CSS 动画精髓：一键呈现奔跑的北极熊

在 CSS 的世界中，动画效果可以为我们的网站增添趣味和活力。今天，我们将使用 CSS 来制作一个令人惊叹的奔跑北极熊动画，一步步掌握 CSS 动画的精髓。

理解北极熊跑步的运动规律

在制作动画之前，我们必须了解北极熊跑步时的运动规律。北极熊在奔跑时，身体呈流线型，四肢前后交替摆动。后腿蹬地有力，前腿摆动幅度大。头部随着身体摆动，尾巴左右摇摆。

创建北极熊的 HTML 结构

首先，我们需要在 HTML 中创建一个包含北极熊的 div 元素。在这个 div 元素中，再创建五个 div 元素，分别代表北极熊的身体、头部、四肢和尾巴。最后，为每个 div 元素添加相应的样式，定义它们的形状、大小和位置。

添加 CSS 动画

接下来，就是为北极熊添加 CSS 动画。我们将使用 keyframes 规则来定义动画的关键帧，在关键帧中定义动画的开始和结束状态。最后，使用 animation 属性将动画应用到北极熊的各个部分。

代码示例

以下是一个完整的代码示例：

<div class="container">
  <div class="body"></div>
  <div class="head"></div>
  <div class="leg-front-left"></div>
  <div class="leg-front-right"></div>
  <div class="leg-back-left"></div>
  <div class="leg-back-right"></div>
  <div class="tail"></div>
</div>

.container {
  position: relative;
  width: 500px;
  height: 500px;
}

.body {
  position: absolute;
  top: 200px;
  left: 100px;
  width: 200px;
  height: 100px;
  background-color: white;
}

.head {
  position: absolute;
  top: 100px;
  left: 150px;
  width: 50px;
  height: 50px;
  background-color: black;
}

.leg-front-left {
  position: absolute;
  top: 300px;
  left: 100px;
  width: 20px;
  height: 100px;
  background-color: black;
}

.leg-front-right {
  position: absolute;
  top: 300px;
  left: 200px;
  width: 20px;
  height: 100px;
  background-color: black;
}

.leg-back-left {
  position: absolute;
  top: 400px;
  left: 100px;
  width: 20px;
  height: 100px;
  background-color: black;
}

.leg-back-right {
  position: absolute;
  top: 400px;
  left: 200px;
  width: 20px;
  height: 100px;
  background-color: black;
}

.tail {
  position: absolute;
  top: 250px;
  left: 250px;
  width: 50px;
  height: 20px;
  background-color: black;
}

@keyframes run {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(500px);
  }
}

.body {
  animation: run 3s infinite;
}

.head {
  animation: run 3s infinite;
}

.leg-front-left {
  animation: run 3s infinite;
}

.leg-front-right {
  animation: run 3s infinite;
}

.leg-back-left {
  animation: run 3s infinite;
}

.leg-back-right {
  animation: run 3s infinite;
}

.tail {
  animation: run 3s infinite;
}