炫动视界，畅享动画之旅！

2023-11-06 22:31:03

CSS 动画的奇妙世界：赋予网页活力

打造令人惊叹的视觉效果

CSS 动画凭借其灵活性和广泛的适用性而备受推崇，它为网页注入活力，让静态的页面动感十足。从简单的运动到复杂的动画序列，CSS 动画可实现令人惊叹的视觉效果。

亲自动手：创建奔跑的小子动画

让我们踏上创造“奔跑的小子”动画的旅程。首先，使用 HTML 构建角色的结构，然后通过 CSS 为其设置样式。最后，添加动画效果，让角色栩栩如生。

<div class="boy">
  <div class="head"></div>
  <div class="body"></div>
  <div class="legs"></div>
  <div class="arms"></div>
</div>

.boy {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
}

.head {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  left: 40px;
  top: 20px;
}

.body {
  width: 20px;
  height: 40px;
  background-color: #000;
  position: absolute;
  left: 40px;
  top: 40px;
}

.legs {
  width: 10px;
  height: 20px;
  background-color: #000;
  position: absolute;
  left: 45px;
  top: 80px;
}

.arms {
  width: 10px;
  height: 20px;
  background-color: #000;
  position: absolute;
  left: 35px;
  top: 60px;
}

.boy.running {
  animation: running 2s infinite linear;
}

@keyframes running {
  0% {
    left: 0;
  }

  50% {
    left: 100px;
  }

  100% {
    left: 200px;
  }
}