"```markdown CSS3实现星系轨道旋转特效

使用CSS3的@keyframes关键帧动画和transform属性可以实现星系轨道旋转特效。

首先，创建HTML结构，使用<div>元素表示太阳、行星和轨道，通过CSS设置它们的样式和位置。然后使用@keyframes定义关键帧动画，通过transform属性实现旋转效果。

HTML结构：

<div class=\"solar-system\">
  <div class=\"sun\"></div>
  <div class=\"orbit orbit1\">
    <div class=\"planet planet1\"></div>
  </div>
  <div class=\"orbit orbit2\">
    <div class=\"planet planet2\"></div>
  </div>
  <div class=\"orbit orbit3\">
    <div class=\"planet planet3\"></div>
  </div>
</div>

CSS样式：

.solar-system {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
}

.sun, .planet {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.sun {
  background-color: #ffcc00;
  top: 50%;
  left: 50%;
  margin: -25px;
  z-index: 2;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px;
  border: 1px dashed #ccc;
  border-radius: 50%;
  animation: orbit 10s linear infinite;
}

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

.orbit1 { animation-duration: 5s; }
.orbit2 { animation-duration: 10s; }
.orbit3 { animation-duration: 20s; }

.planet {
  background-color: #6699cc;
  top: 0;
  left: 50%;
  margin: -25px 0 0 -25px;
}

通过以上HTML和CSS代码，可以实现太阳、行星和轨道的旋转效果，每个行星都绕着太阳在自己的轨道上旋转，通过调整@keyframes的参数和样式可以实现不同的轨道旋转速度和方向。

这种实现方法利用了CSS3的动画特性，不需要使用JavaScript，能够在现代浏览器中良好地展示出星系轨道旋转的特效。

使用CSS3实现星系轨道旋转特效

"```markdown CSS3实现星系轨道旋转特效