CSS3动画人物合集素材

人物合集在Web设计中相当常见，而CSS3动画可以使得这些人物更加生动，增加页面的可读性和趣味性。这里，我们来介绍一些常用的CSS3动画人物合集素材。

/*案例一：小鹿动画*/
@keyframes deer{
  0%{
    transform:translateY(0) scale(1);
  }
  100%{
    transform:translateY(-100px) scale(1.2);
   }
}

.deer{
  animation: deer 1s ease-in-out infinite alternate;
}

/*案例二：跳绳小女孩*/
@keyframes skip{
  0%{
    transform:rotate(0) translateY(-30px) rotate(0);
  }
  50%{
    transform:rotate(180deg) translateY(0) rotate(-180deg);
  }
  100%{
    transform:rotate(360deg) translateY(-30px) rotate(-360deg);
  }
}

.skip{
  animation: skip 1s ease-in-out infinite alternate;
}

/*案例三：爆米花*/
@keyframes pop{
  0%{
    transform:translateY(10px);
    opacity:0;
  }
  100%{
    transform:translateY(-120px);
    opacity:1;
  }
}

.popcorn{
  animation: pop 0.8s ease-in-out infinite alternate;
}

/*案例四：魔法师*/
@keyframes magician{
  0%{
    transform:translateY(0) scaleX(1);
  }
  100%{
    transform:translateY(-40px) scaleX(-1);
  }
}

.mage{
  animation: magician 1s ease-in-out infinite alternate;
}

通过使用CSS3动画，可以轻松实现各种有趣的角色运动效果，让你的网页动起来！