梦幻星球 - 纯css3动画加载loading特效

实现动画效果的css代码
.atome {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  right: 0;
  bottom: 0;
  margin: auto;
  transform-style: preserve-3d;
  animation: AtomeRotate 8s linear infinite;
}
.atome .circle {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: circleColor 20s linear infinite;
}
.atome .circle:after {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  box-shadow: 0px 0px 30px rgba(191, 255, 0, 0.7), 0px 0px 20px rgba(191, 255, 0, 0.5), 0px 0px 10px rgba(191, 255, 0, 0.3), 0px 0px 5px rgba(191, 255, 0, 0.1), 0px 0px 15px rgba(191, 255, 0, 0.5) inset, 0px 0px 10px rgba(191, 255, 0, 0.3) inset, 0px 0px 5px rgba(191, 255, 0, 0.1) inset;
  bottom: 0;
  right: 0;
  margin: auto;
  background-color: white;
  content: "";
  animation: circleRotate 8s linear infinite;
}
.atome .circle .dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  animation: dotRotate 4s linear infinite;
  transform-style: preserve-3d;
}
.atome .circle .dot:before, .atome .circle .dot:after {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  box-shadow: 0px 0px 30px rgba(0, 222, 255, 0.7), 0px 0px 20px rgba(0, 222, 255, 0.5), 0px 0px 10px rgba(0, 222, 255, 0.3), 0px 0px 5px rgba(0, 222, 255, 0.1), 0px 0px 15px rgba(0, 222, 255, 0.5) inset, 0px 0px 10px rgba(0, 222, 255, 0.3) inset, 0px 0px 5px rgba(0, 222, 255, 0.1) inset;
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #d3fcf2;
  background-color: white;
  top: 50%;
  left: -7px;
  transform-style: preserve-3d;
  transform: rotateX(90deg);
}
.atome .circle .dot:before {
  transform: rotateY(90deg);
}
.atome .circle:nth-child(1) {
  transform: rotateY(0deg);
}
.atome .circle:nth-child(1) .dot {
  animation-delay: 0s;
}
.atome .circle:nth-child(2) {
  transform: rotateY(18deg);
}
.atome .circle:nth-child(2) .dot {
  animation-delay: 0.2s;
}
.atome .circle:nth-child(3) {
  transform: rotateY(36deg);
}
.atome .circle:nth-child(3) .dot {
  animation-delay: 0.4s;
}
.atome .circle:nth-child(4) {
  transform: rotateY(54deg);
}
.atome .circle:nth-child(4) .dot {
  animation-delay: 0.6s;
}
.atome .circle:nth-child(5) {
  transform: rotateY(72deg);
}
.atome .circle:nth-child(5) .dot {
  animation-delay: 0.8s;
}
.atome .circle:nth-child(6) {
  transform: rotateY(90deg);
}
.atome .circle:nth-child(6) .dot {
  animation-delay: 1s;
}
.atome .circle:nth-child(7) {
  transform: rotateY(108deg);
}
.atome .circle:nth-child(7) .dot {
  animation-delay: 1.2s;
}
.atome .circle:nth-child(8) {
  transform: rotateY(126deg);
}
.atome .circle:nth-child(8) .dot {
  animation-delay: 1.4s;
}
.atome .circle:nth-child(9) {
  transform: rotateY(144deg);
}
.atome .circle:nth-child(9) .dot {
  animation-delay: 1.6s;
}
.atome .circle:nth-child(10) {
  transform: rotateY(162deg);
}
.atome .circle:nth-child(10) .dot {
  animation-delay: 1.8s;
}

@keyframes AtomeRotate {
  0% {
    transform: rotateX(0deg) rotateY(15deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(15deg);
  }
}
@keyframes circleRotate {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
@keyframes circleColor {
  0% {
    border: solid 1px rgba(191, 255, 0, 0);
  }
  80% {
    border: solid 1px rgba(191, 255, 0, 0);
  }
  90% {
    border: solid 1px rgba(191, 255, 0, 0.3);
  }
  100% {
    border: solid 1px rgba(191, 255, 0, 0);
  }
}
@keyframes dotRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}