css动画片大全

如果你正在寻找一些好看的CSS动画片，那么你的搜索可能已经结束了。在这里，我们将为你介绍一些值得收藏的优秀CSS动画片。

/*
 *下面是一些神奇的CSS动画片
*/
.earth-spin {
  animation: spin 5s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.sun-bounce {
  animation: bounce 1s infinite ease-in-out;
}

@keyframes bounce {
  0%,20%,50%,80%,100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.moon-rotate {
  animation: moon-rotate 10s infinite linear;
}

@keyframes moon-rotate {
  from {
    transform-origin: center center;
    transform: rotate(0);
  }
  to {
    transform-origin: center center;
    transform: rotate(360deg);
  }
}

以上这些动画片只是冰山一角，你可以在代码库中找到更多的优秀动画片。不断地学习与尝试，可以让你拥有更高的技能水平。