使用CSS旋转行星

Question

我有一个项目，我在其中创建一些行星，它们需要旋转。我是目前在学校的初学者。我找到了一些可以旋转的代码，但是它开始跳过。另一种方法是让它交替旋转，但看起来不正确。

如何使用CSS修复此问题？

.earth {
    width: 300px;
    height: 300px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000;
}

.earth:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: -20px -20px 50px 2px #000 inset;
    border-radius: 50%;
}

.earth > div {
    width: 200%;
    height: 100%;
    animation: spin 30s linear infinite;
    background: url(https://github.com/BHouwens/SolarSim/blob/master/images/earthmap1k.jpg?raw=true);
    /*orginal image at https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Earthmap1000x500compac.jpg/640px-Earthmap1000x500compac.jpg */
    background-size: cover;
}

@keyframes spin {
    to {
        transform: translateX(-50%);
    }
}

<div class="earth">
  <div></div>
</div>

这里是问题的GIF图片：https://imgur.com/a/f7nUtrW//

Answer 1

我想Pure CSS 3D solar system应该是帮助您的好起点。看一下CSS动画部分。

有关地球动画持续时间的示例，您将在链接后找到while代码

#earth .pos,
#earth .planet,
#earth.orbit {
  animation-duration: 12.00021s;
}

Answer 2

您可以在关键帧中添加两个阶段以指定x位置，例如：

@keyframes spin{
  0% { background-position-x: 0; } 
  100% { background-position-x: -600px; }
}

我在结果中添加了一个代码段：

.earth {
    width: 300px;
    height: 300px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000;
}

.earth:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: -20px -20px 50px 2px #000 inset;
    border-radius: 50%;
}

.earth > div {
    width: 200%;
    height: 100%;
    animation: spin 5s linear infinite;
    background: url(https://github.com/BHouwens/SolarSim/blob/master/images/earthmap1k.jpg?raw=true);
    /*orginal image at https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Earthmap1000x500compac.jpg/640px-Earthmap1000x500compac.jpg */
    background-size: cover;
}
@keyframes spin{
  0% { background-position-x: 0; } 
  100% { background-position-x: -600px; }
}

<div class="earth">
  <div></div>
</div>