[分享]css做火柴人简单动画

CSS是一种层叠样式表语言，可以用来控制网页的外观和排版。除了常规的界面布局，CSS还可以用来制作简单的动画。下面我们来看看如何用CSS做一个火柴人的简单动画。/ 定义火柴人的样式 / .stickm...

CSS是一种层叠样式表语言，可以用来控制网页的外观和排版。除了常规的界面布局，CSS还可以用来制作简单的动画。下面我们来看看如何用CSS做一个火柴人的简单动画。

/* 定义火柴人的样式 */
.stickman {
  position: relative;
  width: 100px;
  height: 150px;
  border: 2px solid black;
  box-sizing: border-box;
  border-radius: 50% 50% 0 0;
}

.head {
  position: absolute;
  top: -25px;
  left: 37px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: black;
}

.body {
  position: absolute;
  top: 15px;
  left: 48px;
  width: 5px;
  height: 75px;
  background-color: black;
  z-index: -1;
}

.arms {
  position: absolute;
  top: 45px;
  width: 100px;
  height: 5px;
  background-color: black;
  transform: rotate(45deg);
}

.arms.left {
  left: 25px;
  transform: rotate(-45deg);
}

.legs {
  position: absolute;
  top: 90px;
  width: 100px;
  height: 5px;
  background-color: black;
  transform: rotate(-45deg);
}

.legs.left {
  left: 25px;
  transform: rotate(45deg);
}

/* 定义动画 */
@keyframes walk {
  from { transform: translateX(0); }
  to { transform: translateX(50px); }
}

/* 给火柴人添加动画 */
.stickman {
  animation: walk 1s infinite alternate;
} 

首先我们定义了火柴人的样式，包括头、身体、臂和腿的位置和形状。然后我们定义了一个名为“walk”的动画，让火柴人向右移动50像素，然后回到原来的位置。最后，我们将动画应用到火柴人的样式上，让它无限循环和反向播放。

如果你想让火柴人在页面中跳跃或者转圈等，只需要改变动画的参数即可。CSS动画虽然不如JavaScript灵活和复杂，但是对于简单动画来说使用CSS可以更加轻松和便捷。