[分享]css3怎么让小人动

CSS3是一种比较新的网页样式语言，可以帮助我们让页面的小人动起来。下面就让我们看看如何使用CSS3来实现小人的动画效果。/ 定义小人的样式 / .messenger { : absolute; wi...

CSS3是一种比较新的网页样式语言，可以帮助我们让页面的小人动起来。下面就让我们看看如何使用CSS3来实现小人的动画效果。

/* 定义小人的样式 */
.messenger {
  position: absolute;
  width: 50px;
  height: 100px;
  background: #2c3e50;
  border-radius: 50px 50px 0 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: messenger 2s ease-in-out infinite;
}

/* 定义小人的动画 */
@keyframes messenger {
  /* 定义小人跳的动作 */
  0% {
    transform: translate(-50%, -50%) rotate(-20deg);
  }
  50% {
    transform: translate(-50%, -70%) rotate(-20deg);
  }
  60% {
    transform: translate(-50%, -70%) rotate(20deg);
  }
  80% {
    transform: translate(-50%, -70%) rotate(-20deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-20deg);
  }
} 

在代码中，我们首先定义了小人的样式，并使用了position属性让他在页面中居中。然后我们通过定位和旋转等属性来定义小人的跳跃动作，并使用animation属性来调用该动画并让小人无限循环执行。

以上就是如何使用CSS3来让小人动起来的方法。通过CSS3的强大功能，我们能够实现更多更酷炫的动画效果，让网页活起来。