球体围绕另一个球体旋转 - CSS

Question

我正在尝试创建一个球体围绕另一个球体旋转（轨道）的纯 CSS 设计。准确地说，就像月亮绕太阳运行一样。地球的形象恰当地融入了地球的范围。但是月亮的图像不适合月亮的球体。

附上的图片可能有助于更好地理解我的问题

下面是我的 CSS 脚本

    .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: transparent;
}

        .center .earth {
          position: absolute;
          top: 0;
          width: 200px;
          height: 200px;
          background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
          margin: 3em auto;
          border-radius: 50%;
          background-size: 630px;
          animation: spin 30s linear alternate infinite;
          box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
          color: #000;``
        }

            .center .earth .moon {
          position: absolute;
          top: calc(50% - 1px);
          left: 50%;
          width: 200px;
          height: 2px;
          transform-origin: left;
          border-radius: 50%;
          /*animation: rotate 10s linear infinite;*/
        }

        .center .earth .moon::before {
          content: url(moon.jpg);
          position: absolute;
          top: -25px;
          right: 0;
          width: 50px;
          height: 50px;
          background: #fff;
          border-radius: 50%;
          /*animation: rotate 10s linear infinite;*/
        }

        @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

        @keyframes spin {
      100% {
        background-position: 100%;
      }
    }

Answer 1

进行此更改content: ""; 到background-image: url(moon.jpg); 并从类名 .center .earth .moon::before 中删除 background: #fff

body {
  background: black;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: transparent;
}

        .center .earth {
          position: absolute;
          top: 0;
          width: 200px;
          height: 200px;
          background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
          margin: 3em auto;
          border-radius: 50%;
          background-size: 630px;
          animation: spin 30s linear alternate infinite;
          box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
          color: #000;``
        }

            .center .earth .moon {
          position: absolute;
          top: calc(50% - 1px);
          left: 50%;
          width: 200px;
          height: 2px;
          transform-origin: left;
          border-radius: 50%;
          /*animation: rotate 10s linear infinite;*/
        }

        .center .earth .moon::before {
          content: "";
          background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsvjrANMGI8aBJSFbsHteVa04rcB1IjjNsbrhm8vTLflfpiG133g);
          position: absolute;
          top: -25px;
          right: 0;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          /*animation: rotate 10s linear infinite;*/
        }

        @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

        @keyframes spin {
      100% {
        background-position: 100%;
      }
    }

<div class="center">
<div class="earth">
<div class="moon">

</div>
</div>
</div>