使用html js和css制作一个包含5个电子的atom预加载程序

我想为我的网站提供一个atom形式的预加载程序，但遇到了以下代码： 但我想要一个有5个电子（硼）的原子，我正在努力编辑代码，通过添加新的电子并编辑与其他电子对应的电子：

@keyframes electron-circle1 {
    from { transform: rotateY(70deg) rotateZ(20deg); }
    to { transform: rotateY(70deg) rotateZ(380deg); }
 }
@keyframes electron1 {
     from { transform: rotateZ(-20deg) rotateY(-70deg); }
     to { transform: rotateZ(-380deg) rotateY(-70deg); }
}
.atom .electron:nth-child(1):before {
     transform: rotateZ(-20deg) rotateY(-70deg);
    animation: electron1 3s linear infinite;
}

如果社区中有人能帮我这么做，那将非常有帮助。（更改学位值）

---

谢谢。

你需要添加/复制这两个原子，并缩小（或放大）@G-Cyr如何倾斜电子，使它们与笔中的其他壳层等距等角对于倾斜，它是关于旋转值，3使每个原子旋转60度（180/3），5应为36度（180/5）180度，不是360，因为它们不重叠，而是显示在另一侧；）@G-Cyr标尺只是根据半径调整环的大小，而不是使其倾斜多少。在以下部分中键入3：关键帧电子圆4{从{变换：rotateY（60度）rotateX（60度）rotateZ（-30度）比例（3）；}到{变换：rotateY（60度）rotateX（60度）rotateZ（330度）比例（3）；}不会改变倾斜度，只会改变半径和大小。也许你做得太多了，退后一步；）