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

在前端开发中，你可以使用 CSS3 的 @keyframes 和 animation 属性来创建一个星系轨道旋转的特效。下面是一个简单的例子，演示如何使用这些技术来制作一个基础的星系轨道旋转动画。

首先，你需要为星系中的每个行星创建一个 HTML 元素，并应用 CSS 样式和动画。

HTML:

<div class="solar-system">
    <div class="sun"></div>
    <div class="planet orbit1"></div>
    <div class="planet orbit2"></div>
    <div class="planet orbit3"></div>
</div>

CSS:

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

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

.planet {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    background-color: blue;
    border-radius: 50%;
}

.orbit1 {
    animation: orbit 10s linear infinite;
}

.orbit2 {
    animation: orbit 15s linear infinite reverse;
}

.orbit3 {
    animation: orbit 20s linear infinite alternate;
}

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

在这个例子中，.solar-system 是包含太阳和行星的容器。.sun 是太阳，而 .planet 是行星。每个行星都有一个不同的动画，通过调整 animation 属性的持续时间、方向和迭代次数来实现不同的轨道效果。@keyframes orbit 定义了行星围绕太阳旋转的动画。

请注意，这只是一个简单的示例，用于演示如何使用 CSS3 动画来创建星系轨道旋转特效。你可以根据需要调整行星的数量、大小、颜色和动画参数，以及添加更多的细节和交互功能来增强效果。

此外，如果你想要更复杂的动画效果，如椭圆轨道或不同行星有不同速度的旋转，你可能需要使用 JavaScript 或一个动画库来提供更精细的控制。