悟空打月亮简单动画：中秋快乐！

前端

2023-12-02 04:27:42

悟空打月亮简单动画

中秋节是中国最重要的传统节日之一，人们会在这一天赏月、吃月饼，欢度佳节。为了庆祝中秋节，我制作了一个简单而有趣的悟空打月亮动画，与大家分享中秋的喜悦。

这个动画完全由CSS实现，无需任何代码基础，您只需复制粘贴即可。动画展示了悟空腾空而起，一拳打向月亮的场景。月亮被悟空打得粉碎，碎屑四溅。动画最后，悟空得意地站在月亮残骸上，向大家挥手致意。

这个动画虽然简单，但它却展现了CSS的强大功能。CSS可以用来创建各种各样的动画效果，而这些动画效果可以为我们的网站和应用程序增添趣味性和互动性。

我将这个动画分享给大家，希望大家喜欢。也希望大家能够在中秋节这个团圆的日子里，与家人和朋友欢度佳节。

如何使用这个动画

要使用这个动画，您只需将其复制粘贴到您的HTML文件中即可。动画的代码如下：

<div class="悟空">
  <div class="头部">
    <div class="眼睛"></div>
    <div class="鼻子"></div>
    <div class="嘴巴"></div>
  </div>
  <div class="身体">
    <div class="胳膊"></div>
    <div class="腿"></div>
  </div>
</div>

<div class="月亮">
  <div class="碎屑"></div>
</div>

<style>
.悟空 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #ff6600;
  border-radius: 50%;
  animation: 悟空跳跃 1s infinite alternate;
}

.悟空 .头部 {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
}

.悟空 .头部 .眼睛 {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 50%;
}

.悟空 .头部 .鼻子 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 50%;
}

.悟空 .头部 .嘴巴 {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 10px;
  background-color: #000000;
}

.悟空 .身体 {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 40px;
  background-color: #ff6600;
  border-radius: 50%;
}

.悟空 .身体 .胳膊 {
  position: absolute;
  top: 0;
  left: 25%;
  width: 10px;
  height: 20px;
  background-color: #ff6600;
  border-radius: 50%;
}

.悟空 .身体 .腿 {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 20px;
  background-color: #ff6600;
  border-radius: 50%;
}

.月亮 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 50%;
  animation: 月亮破碎 1s infinite alternate;
}

.月亮 .碎屑 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  animation: 碎屑飞溅 1s infinite alternate;
}

@keyframes 悟空跳跃 {
  0% {
    top: 50%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: 50%;
  }
}

@keyframes 月亮破碎 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes 碎屑飞溅 {
  0% {
    top: 50%;
    left: 50%;
  }
  50% {
    top: 25%;
    left: 25%;
  }
  100% {
    top: 50%;
    left: 50%;
  }
}
</style>