Question

我一直在尝试使用CSS创建一个基本的太阳系，我不知道我在哪里搞砸了边界半径出现（例如它们的轨道路径）出现在距离行星稍远的地方，并且这进一步增加（因此外行星甚至不接近其轨道路径的“环”出现的位置）。

所有CSS的JSFiddle：https://jsfiddle.net/7ebn3jkz/14/

这是HTML（仍然缺少海王星，但想先解决这个问题）：

 <div id ="universe">
        <!-- Sun -->
        <div id="sun">
        </div>
        <!-- Mercury -->
        <div id="mercury-orbit">
        <div id="mercury"></div>
        </div>

        <!-- Venus -->
        <div id="venus-orbit">
        <div id="venus"></div>
        </div>

        <!-- Earth -->
        <div id="earth-orbit">
        <div id="earth"></div>
        </div>

         <!-- Moon -->
        <div id="moon-orbit">
        <div id="moon"></div>
        </div>

        <!-- Mars -->
        <div id="mars-orbit">
        <div id="mars"></div>
        </div>

        <!-- Jupiter -->
        <div id="jupiter-orbit">
        <div id="jupiter"></div>
        </div>

       <!-- Saturn -->
        <div id="saturn-orbit">
        <div id="saturn"></div><div id ="saturn-rings"></div>
        </div>

       <!--Uranus -->
       <div id="uranus-orbit">
       <div id="uranus"></div>
       </div>
 </div>

这是一个行星的CSS的例子

#mercury {
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    background: #919191; 
    background: -moz-radial-gradient(center, ellipse cover, #919191 0%, #7c7c7c 53%); 
    background: -webkit-radial-gradient(center, ellipse cover, #919191 0%,#7c7c7c 53%); 
    background: radial-gradient(ellipse at center, #919191 0%,#7c7c7c 53%); 
}

对于它的轨道

*/
#mercury-orbit {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 110px;
 height: 110px;
 margin-top: -55px;
 margin-left: -55px;
 border-style: solid;
 border-color: white;
 border radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -webkit-animation: spin-right 5s linear infinite;
     -moz-animation: spin-right 5s linear infinite;
      -ms-animation: spin-right 5s linear infinite;
       -o-animation: spin-right 5s linear infinite;
          animation: spin-right 5s linear infinite;
}
@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

Answer 1

将每个行星div上的50％border-radius更改为0仅用于测试目的，您将看到行星div在其内部正在做什么以及它放置在何处。它正在做它应该做的事情，你只需要抵消旋转中每个行星的对齐。

要解决此问题，请添加以下代码。不要忘记根据需要添加前缀。你还需要调整土星周围环的代码。

#universe > div > div {
    top: 50%;
    transform: translateX(-50%);
}

https://jsfiddle.net/7ebn3jkz/15/

CSS边界逐渐远离关联ID

1 个答案: