让小火箭🚀快乐飞行：使用CSS3实现中秋绕月飞行

前端

2023-12-07 05:28:32

好的，我这就开始生成文章：

绕月飞行的中秋小火箭

中秋节即将到来，我们不妨用CSS3来创建一个动画小火箭，让它围绕着月亮飞行，为这个节日增添一些科技感和趣味性。

准备工作

在开始之前，我们需要准备一些东西：

一个文本编辑器，如记事本或Sublime Text
一个现代浏览器，如Chrome或Firefox
一些基本的HTML和CSS知识

步骤

创建HTML文件

首先，我们需要创建一个HTML文件，并将其命名为“index.html”。然后，在文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="rocket"></div>
  <div class="moon"></div>
</body>
</html>

创建CSS文件

接下来，我们需要创建一个CSS文件，并将其命名为“style.css”。然后，在文件中添加以下代码：

.rocket {
  width: 50px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rocket 5s infinite;
}

.rocket:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: orange;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.rocket:after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: yellow;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.moon {
  width: 100px;
  height: 100px;
  background-color: gray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rocket {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}