html+css,动画实现“地球绕太阳旋转“

1.效果

2.代码

html

  <div class="main">
    <div class="son">
      <div class="earch"></div>
    </div>
  </div>

css

.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.main div {
  border-radius: 100%;
}

.son {
  width: 300px;
  height: 300px;
  background-color: rgb(255, 208, 75);
  position: relative;
  perspective: 800px;
  transform-style: preserve-3d;
  background-image: url('../assets/son.jpg');
  background-repeat: no-repeat;
  background-size: 120%;
  background-position: 50% 50%;
}

.earch {
  width: 80px;
  height: 80px;
  background-color: skyblue;
  position: absolute;
  top: 50%;
  left:-80%;
  transform: translate(-50%,-50%);
  animation: myEarch 2s infinite linear;
  background-image: url('../assets/earch.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

@keyframes myEarch {
  0%{
    transform: translate3d(0px,0px,0);
  }
  10%{
    transform: translate3d(140px,5px,200px);
  }
  20%{
    transform: translate3d(260px,10px,400px);
  }
  30%{
    transform: translate3d(380px,15px,400px);
  }
  40%{
    transform: translate3d(500px,10px,200px);
  }
  50%{
    transform: translate3d(640px,5px,0px);
  }
  60%{
    transform: translate3d(500px,10px,-100px);
  }
  70%{
    transform: translate3d(380px,15px,-100px);
  }
  80%{
    transform: translate3d(260px,10px,-100px);
  }
  90%{
    transform: translate3d(140px,5px,-100px);
  }
  100%{
    transform: translate3d(0px,0px,-100px);
  }
}