用CSS3画出地球围绕太阳公转，越形象越好（上海沪江教育1面）

[LLwanran]

提示：主要是考察对CSS3动画的了解程度

<div class="rotate">
  <!-- 太阳 -->
  <div class="sun"></div>
  <!-- 地球 -->
  <div class="earth"></div>
</div>

.rotate {
  width: 800px;
  height: 800px;
  position: relative;
  margin: 0 auto;
  background-color: #000000;
  padding: 0;
  transform: scale(1);
}

/* 太阳 */
.sun {
  left: 357px;
  top: 357px;
  height: 90px;
  width: 90px;
  background-color: rgb(248, 107, 35);
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgb(248, 107, 35), -5px -5px 10px rgb(248, 107, 35),
    5px -5px 10px rgb(248, 107, 35), -5px 5px 10px rgb(248, 107, 35);
  position: absolute;
  margin: 0;
}

/* 地球 */
.earth {
  left: 266.5px;
  top: 391px;
  height: 18px;
  width: 18px;
  background-color: rgb(115, 114, 174);
  border-radius: 50%;
  position: absolute;
  transform-origin: 134px 9px;
  animation: rotate 6.25s infinite linear;
}

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