使用纯css完成行星图并且封装成组件

在这里插入代码片
<template>
  <div class="box">
    <div class="circle-wrapper">
      <div class="circle-1">
        <div class="ball1"></div>
        <div class="circle-2">
          <div class="ball2">www</div>
          <div class="circle-3">
            <div class="ball3"></div>
            <div class="circle-4">
              <div class="ball4"></div>
              <div class="circle-5">
                <div class="circle-6">
                  <div class="center_ball">center</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.center_ball {
  width: 50%;
  height: 50%;
  background: yellow;
  border-radius: 50%;
  /* transform: rotatex(-90deg); */
  animation: ballrotate 20s linear 0s normal none infinite;
}
.box {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
}
.circle-wrapper {
  position: absolute;
  left: 50%;
  /* transform: translatex(-50%); */
  border-radius: 50%;
  border: 1px solid #59b9f3;
  width: 5rem;
  height: 5rem;
  box-shadow: 0px 0px 30px 10px #59b9f3;
  transform: translatex(-50%) rotateX(60deg);
  transform-style: preserve-3d;
  animation: orbitrotates 20s linear 0s normal none infinite;
}
.circle-1,
.circle-2,
.circle-3,
.circle-4,
.circle-5,
.circle-6 {
  width: 80%;
  height: 80%;
  border: 2px solid #59b9f3;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform-style: preserve-3d;
  /* animation: fade 4s infinite; */
  box-shadow: 0px 0px 30px 10px #59b9f3;
}
.ball1,
.ball2,
.ball3,
.ball4 {
  width: 0.3rem;
  height: 0.3rem;
  background: #08d084;
  border-radius: 50%;
  transform: rotateX(0deg);
  animation: ballrotate 20s linear 0s normal none infinite;
}

.ball2,
.ball4 {
  float: right;
}
@keyframes orbitrotates {
  0% {
    transform: translatex(-50%) rotateX(60deg) rotateZ(0deg);
  }
  100% {
    transform: translatex(-50%) rotateX(60deg) rotateZ(-360deg);
  }
}
@keyframes ballrotate {
  0% {
    transform: rotateX(-90deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(-90deg) rotateY(-360deg);
  }
}
@keyframes up-hide {
  100% {
    /* top: -100%; */
    /* margin-top: -20%; */
    /* transform: rotateX(120deg); */
    transform: translateZ(100px) scale(0.8);
  }
}

.circle-5,
.circle-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: up-hide 3.5s infinite;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>