Javascript CSS带轨道的同心圆；“行星”；

我试图用css绘制一个“太阳系”图，同心圆很容易用css边界半径、边界和一些变换来绘制，但我试图找到一种方法，让小“行星”附着在“轨道”或彩色边界上。必须有更精确的方法来实现这一点

如果你看这张图片，你会看到我想做什么：

以及它目前的样子，很抱歉内联css

---

因为它是关于圆的，所以你可以依靠旋转，你只需要知道距圆心的距离（半径）。还可以通过使用较少的元素来优化同心圆

下面是一个示例，我将使用CSS变量轻松控制每个元素。请注意（我们使用平移居中，旋转，然后再次平移）

.orbit{
宽度：150px；
高度：150像素；
填充：30px；
边界半径：50%；
背景：红色内容框；
边框：1px实心红色；/*105px（30px+150px/2）的第一轨道*/
保证金：自动；
位置：相对位置；
}
/*135px时第二名*/
.轨道：之前，
.轨道：之后{
内容：“；
位置：绝对位置；
顶部：var（-o，-30px）；
底部：var（-o，-30px）；
左：var（--o，-30px）；
右：var（--o，-30px）；
边界：继承；
边界半径：继承
}
/*第三轨道165px*/
.轨道：之后{
--o:-60px；
}
.轨道跨度{
位置：绝对位置；
z指数：1；
高度：20px；
宽度：20px；
背景：蓝色；
边界半径：继承；
最高：50%；
左：50%；
变换：平移（-50%，-50%）旋转（var（-r，0deg））平移（var（-d，0px））；
}
身体{
保证金：0；
高度：100vh；
显示器：flex；
}

---

您也可以从阴影中绘制圆，并从远处旋转元素，因此您只需注意其宽度：

例如：

html{
显示器：flex；
最小高度：100vh；
}
身体{
保证金：自动；
}
ul，
锂，
跨度{
保证金：0；
填充：0；
}
李{
位置：绝对位置；
颜色：灰色；
列表样式位置：内部；
字体大小：2.5vw；
顶部：0.2米；
右：0.0em；
线高：0；
身高：0；
空白：nowrap；
变换原点：中间偏右；
利润率：-0.4vw 0；
}
跨度{
位置：绝对位置；
颜色：黑色；
变换：平移（-70%，1.5em）旋转（0）；
字体大小：0.5em；
颜色：番茄；
}
身体{
位置：相对位置；
宽度：0.4em；
高度：0.4em；
边界半径：50%；
背景：橙色；
框阴影：
插图0 5px橙色，
0 3vw橙色，
0 1vw 3vw橙色，
0 3vw#333，
0 6vw#444，
06VW蓝色，
06.2vw蓝色，
06.2vw#333，
07.5vw#333，
0.7.5vw蓝色，
0 7.7vw蓝色，
07.75vw#333，
08.7vw#222，
09.5vw#222，
09.55vw绿色，
09.7vw绿色，
0.9.75vw#222，
0 11.5vw#111，
0 11.5vw蓝色，
0 11.7vw蓝色，
0 11.75vw#222，
0 15.2vw#111，
0 15.2大众蓝，
0 15.4vw蓝色，
0 15.45vw#222，
0 17.4vw#111，
0 17.4vw蓝色，
0 17.6大众蓝，
0 17.65vw#222，
0 19.3vw#111，
0 19.3大众蓝，
0 19.5vw蓝色，
0 19.55vw#222，
0 22.3vw#111，
0 22.3vw蓝色，
0 22.5vw蓝色，
100vw；
}
李：第n个孩子（1）{
宽度：6.9vw；
动画：旋转1s-1s线性无限；
}
李：第n个孩子（1）跨度{
动画：rotateName 1s-1s线性无限；
}
李：第n个孩子（2）{
颜色：棕色；
宽度：8.4vw；
动画：旋转1.5s-1.5s线性无限；
}
李：第n个孩子（2）跨度{
动画：rotateName 1.5s-1.5s线性无限；
}
李：第n个孩子（3）{
颜色：rgb（0、120、212）；
宽度：10.6vw；
动画：旋转2s 1s线性无限；
}
李：第n个孩子（3）跨度{
动画：rotateName 2s 1s线性无限；
}
李：第n个孩子（4）{
颜色：红色；
宽度：12.5vw；
动画：旋转2.5s-2.5s线性无限；
}
李：第n个孩子（4）跨度{
动画：rotateName 2.5s-2.5s线性无限；
}
李：第n个孩子（5）{
颜色：金色；
宽度：15.5vw；
动画：旋转3s-3s线性无限；
}
李：第n个孩子（5）跨度{
动画：rotateName 3s-3s线性无限；
}
李：第n个孩子（6）{
颜色：青绿色；
宽度：17.5vw；
动画：旋转3.5s-3.5s线性无限；
}
李：第n个孩子（6）跨度{
动画：rotateName 3.5s-3.5s线性无限；
}
李：第n个孩子（7）{
颜色：深绿色；
宽度：19.5vw；
动画：旋转4s-4s线性无限；
}
李：第n个孩子（7）跨度{
动画：rotateName 4s-4s线性无限；
}
李：第n个孩子（8）{
颜色：青色；
宽度：22.5vw；
动画：旋转4.5s-4.5s线性无限；
}
李：第n个孩子（8）跨度{
动画：rotateName 4.5s-4.5s线性无限；
}
身体：以前{
内容：《太阳报》；
位置：绝对位置；
字体大小：1.5vw；
转换：转换（-50%，-0.5em）；
颜色：红色；文本阴影：0.0.2米黄金、0.0.2米黄金、0.0.2米黄金、0.0.2米黄金、0.0.2米黄金、0.0.2米黄金、0.0.2米黄金、0.0.2米黄金、0.0.2米黄金、0.0.2米黄金、0.2米黄金；
}
@关键帧旋转{
100%{变换：旋转（360度）}
}
@旋转的关键帧{
100%{变换：平移（-70%，1.5em）旋转（-360度）}
}

水银
维纳斯
土
火星
朱庇特
土星
天王星
海王星

如果您的轨道行星的半径为r，轨道圆的直径为d，则制作一个宽度和高度等于（d+r/2）的盒子。把你的行星放在盒子里，x:50%，y:0，然后旋转外盒子。方框应位于圆圈的中心。请使用提琴示例来跟进我的最后一条评论：