css实现宇宙多个星球围绕着地球/太阳的样式

要实现宇宙中多个星球围绕太阳旋转的效果，可以使用CSS的动画和变换属性。以下是一个简单的示例代码：

HTML:

<div class="sun">
  <div class="planet planet1"></div>
  <div class="planet planet2"></div>
  <div class="planet planet3"></div>
</div>

CSS:

.sun {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border-radius: 50%;
  position: relative;
  animation: rotate-sun 10s linear infinite;
}

.planet {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.planet1 {
  background-color: red;
  animation: rotate-planet1 5s linear infinite;
}

.planet2 {
  background-color: blue;
  animation: rotate-planet2 7s linear infinite;
}

.planet3 {
  background-color: green;
  animation: rotate-planet3 9s linear infinite;
}

@keyframes rotate-sun {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotate-planet1 {
  0% { transform: translateX(120px) rotate(0deg); }
  100% { transform: translateX(120px) rotate(360deg); }
}

@keyframes rotate-planet2 {
  0% { transform: translateX(160px) rotate(0deg); }
  100% { transform: translateX(160px) rotate(360deg); }
}

@keyframes rotate-planet3 {
  0% { transform: translateX(200px) rotate(0deg); }
  100% { transform: translateX(200px) rotate(360deg); }
}

这段代码创建了一个黄色的太阳，以及三个分别为红色、蓝色和绿色的星球。通过使用@keyframes关键字和transform属性，我们定义了太阳和星球的旋转动画。每个星球通过不同的translateX值设置了不同的距离太阳的距离，以实现不同速度的旋转。

你可以根据需要调整这些值，以及添加更多的星球和动画效果来创建属于自己的宇宙场景。