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

66 阅读1分钟

"```css body { background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }

#galaxy { width: 200px; height: 200px; position: relative; }

.star { position: absolute; background-color: #fff; border-radius: 50%; }

.star:nth-child(1) { width: 10px; height: 10px; top: 0; left: 50%; animation: rotate_star 10s linear infinite; }

.star:nth-child(2) { width: 8px; height: 8px; top: 0; left: 50%; animation: rotate_star 8s linear infinite; }

.star:nth-child(3) { width: 6px; height: 6px; top: 0; left: 50%; animation: rotate_star 6s linear infinite; }

@keyframes rotate_star { 100% { transform: rotate(360deg); } }