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

要使用CSS3实现星系轨道旋转特效，你可以通过以下步骤进行：

1. HTML结构：

首先，创建一个包含星系中心的div，然后添加代表行星的div。例如：

<div class="galaxy">
    <div class="sun"></div>
    <div class="planet orbit1"></div>
    <div class="planet orbit2"></div>
    <!-- 可以添加更多的行星 -->
</div>

2. CSS样式：

接下来，使用CSS为星系和行星添加样式。你可以使用border-radius属性为行星和太阳添加圆形外观，并使用background属性为它们添加颜色。例如：

.galaxy {
    position: relative;
    width: 800px;
    height: 800px;
    margin: 50px auto;
}

.sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    background: yellow;
    border-radius: 50%;
}

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

.orbit1 {
    top: 50%;
    left: 150px;
    animation: orbit 10s linear infinite;
}

.orbit2 {
    top: 150px;
    left: 50%;
    margin-left: -25px; /* 使行星在轨道中心 */
    animation: orbit 15s linear infinite reverse; /* 反向旋转 */
}

3. CSS动画：

最后，使用CSS的@keyframes规则创建一个名为orbit的动画，该动画将改变行星的位置以模拟轨道旋转。例如：

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

在这个例子中，orbit动画将行星围绕星系中心旋转360度。你可以通过调整translateX的值来改变轨道的半径，或者通过调整动画的持续时间（例如，从10s改为5s）来改变旋转速度。

请注意，这只是一个简单的示例，你可以根据自己的需求进行调整和扩展。例如，你可以添加更多的行星、调整颜色和大小、或者添加其他动画效果来增强星系的外观和动态性。