css 卫星环绕动画

要创建一个CSS卫星环绕动画，你可以使用CSS的动画和过渡属性来实现。以下是一个简单的示例代码，可以帮助你开始：

HTML：

<div class="container">
  <div class="satellite"></div>
</div>

CSS：

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #000;
}

.satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  border-radius: 50%;
  transform-origin: bottom center;
  animation: orbit 4s linear infinite;
}

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

在上面的代码中，我们使用了一个容器元素作为背景，并在其中创建了一个卫星元素。通过为容器设置 `position: relative`，我们能够将卫星元素相对于容器进行定位。

接下来，我们为卫星元素设置了初始位置，并使用 `transform-origin` 属性将旋转的中心点设置在底部中心。然后，我们定义了一个名为 `orbit` 的动画，该动画将卫星元素绕其定位点旋转一周。最后，我们将动画应用于卫星元素。

你可以根据需要调整容器和卫星元素的大小、颜色和动画持续时间等属性，以满足你的具体要求。希望这能帮到你！