使用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://i.stack.imgur.com/3SLqF.jpg);
    /*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

您需要将宽度设置为400%而不是200%，并使用auto 100%代替cover。

我对代码进行了一些优化，这样你就可以很容易地调整尺寸并保持圆形：

​

.earth {
  width: 300px;
  display:inline-block;
  margin: 5px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000;
  position:relative;
}
.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::before {
  content: "";
  display: block;
  width: 400%;
  padding-top:100%;
  animation: spin 3s linear infinite;
  background: url(https://github.com/BHouwens/SolarSim/blob/master/images/earthmap1k.jpg?raw=true);
  background-size: auto 100%;
}

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

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

<div class="earth" style="width:200px">
</div>

<div class="earth" style="width:100px">
</div>

​

同样像下面这样，代码更少，没有伪元素：

​

.earth {
  --d:300px;
  width: var(--d);
  height:var(--d);
  display:inline-block;
  margin: 5px;
  border-radius: 50%;
  box-shadow: -20px -20px 50px 2px #000 inset, 0 0 20px 2px #000;
  background: 
    url(https://i.stack.imgur.com/3SLqF.jpg)
    0/auto 100%;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  to {
    background-position:200% 0;
  }
}

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

<div class="earth" style="--d:200px">
</div>

<div class="earth" style="--d:100px">
</div>

​

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>

​