css打造粒子梦幻星空旋转效果-html代码-BFW代码库

代码语言：html
所属分类：粒子
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Perticle Rotation #05</title>
<style>
  /* basic style */
html,
body {
  position: relative;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at left top, #e6a702 20%, #b27e06 50%, #795302);
}

div {
  transform-style: preserve-3d;
}

.container {
  perspective: 1600px;
}
.container_rotate {
  transform: rotateX(90deg);
}

/* flip style */
.flip {
  position: absolute;
  top: -280px;
  width: 1.6vw;
  height: 1.6vw;
  border-radius: 50%;
}

.rotate:nth-of-type(1) {
  animation: rotation linear infinite reverse;
  animation-delay: -48092ms;
  animation-duration: 37987ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(1) .flip_rotate {
  transform: rotateX(77deg);
}

.rotate:nth-of-type(1) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(1) .flip {
  left: calc(30% + 68px);
}

.rotate:nth-of-type(2) {
  animation: rotation linear infinite reverse;
  animation-delay: -48272ms;
  animation-duration: 57049ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(2) .flip_rotate {
  transform: rotateX(62deg);
}

.rotate:nth-of-type(2) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(2) .flip {
  left: calc(30% + 119px);
}

.rotate:nth-of-type(3) {
  animation: rotation linear infinite reverse;
  animation-delay: -45402ms;
  animation-duration: 47898ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(3) .flip_rotate {
  transform: rotateX(4deg);
}

.rotate:nth-of-type(3) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(3) .flip {
  left: calc(30% + 111px);
}

.rotate:nth-of-type(4) {
  animation: rotation linear infinite reverse;
  animation-delay: -45888ms;
  animation-duration: 46820ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(4) .flip_rotate {
  transform: rotateX(4deg);
}

.rotate:nth-of-type(4) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(4) .flip {
  left: calc(30% + 118px);
}

.rotate:nth-of-type(5) {
  animation: rotation linear infinite reverse;
  animation-delay: -43187ms;
  animation-duration: 56957ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(5) .flip_rotate {
  transform: rotateX(13deg);
}

.rotate:nth-of-type(5) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(5) .flip {
  left: calc(30% + 122px);
}

.rotate:nth-of-type(6) {
  animation: rotation linear infinite reverse;
  animation-delay: -41986ms;
  animation-duration: 24878ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(6) .flip_rotate {
  transform: rotateX(75deg);
}

.rotate:nth-of-type(6) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(6) .flip {
  left: calc(30% + 59px);
}

.rotate:nth-of-type(7) {
  animation: rotation linear infinite reverse;
  animation-delay: -40409ms;
  animation-duration: 41007ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(7) .flip_rotate {
  transform: rotateX(36deg);
}

.rotate:nth-of-type(7) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(7) .flip {
  left: calc(30% + 67px);
}

.rotate:nth-of-type(8) {
  animation: rotation linear infinite reverse;
  animation-delay: -40058ms;
  animation-duration: 35558ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(8) .flip_rotate {
  transform: rotateX(65deg);
}

.rotate:nth-of-type(8) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(8) .flip {
  left: calc(30% + 77px);
}

.rotate:nth-of-type(9) {
  animation: rotation linear infinite reverse;
  animation-delay: -48443ms;
  animation-duration: 24327ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(9) .flip_rotate {
  transform: rotateX(15deg);
}

.rotate:nth-of-type(9) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(9) .flip {
  left: calc(30% + 107px);
}

.rotate:nth-of-type(10) {
  animation: rotation linear infinite reverse;
  animation-delay: -48320ms;
  animation-duration: 30275ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(10) .flip_rotate {
  transform: rotateX(55deg);
}

.rotate:nth-of-type(10) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(10) .flip {
  left: calc(30% + 80px);
}

.rotate:nth-of-type(11) {
  animation: rotation linear infinite reverse;
  animation-delay: -41102ms;
  animation-duration: 25264ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(11) .flip_rotate {
  transform: rotateX(85deg);
}

.rotate:nth-of-type(11) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(11) .flip {
  left: calc(30% + 54px);
}

.rotate:nth-of-type(12) {
  animation: rotation linear infinite reverse;
  animation-delay: -40610ms;
  animation-duration: 43945ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(12) .flip_rotate {
  transform: rotateX(14deg);
}

.rotate:nth-of-type(12) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(12) .flip {
  left: calc(30% + 112px);
}

.rotate:nth-of-type(13) {
  animation: rotation linear infinite reverse;
  animation-delay: -41970ms;
  animation-duration: 22836ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(13) .flip_rotate {
  transform: rotateX(58deg);
}

.rotate:nth-of-type(13) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(13) .flip {
  left: calc(30% + 76px);
}

.rotate:nth-of-type(14) {
  animation: rotation linear infinite reverse;
  animation-delay: -45785ms;
  animation-duration: 22596ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(14) .flip_rotate {
  transform: rotateX(34deg);
}

.rotate:nth-of-type(14) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(14) .flip {
  left: calc(30% + 55px);
}

.rotate:nth-of-type(15) {
  animation: rotation linear infinite reverse;
  animation-delay: -45560ms;
  animation-duration: 57366ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(15) .flip_rotate {
  transform: rotateX(50deg);
}

.rotate:nth-of-type(15) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(15) .flip {
  left: calc(30% + 87px);
}

.rotate:nth-of-type(16) {
  animation: rotation linear infinite reverse;
  animation-delay: -42871ms;
  animation-duration: 48217ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(16) .flip_rotate {
  transform: rotateX(53deg);
}

.rotate:nth-of-type(16) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(16) .flip {
  left: calc(30% + 98px);
}

.rotate:nth-of-type(17) {
  animation: rotation linear infinite reverse;
  animation-delay: -49654ms;
  animation-duration: 50192ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(17) .flip_rotate {
  transform: rotateX(34deg);
}

.rotate:nth-of-type(17) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(17) .flip {
  left: calc(30% + 77px);
}

.rotate:nth-of-type(18) {
  animation: rotation linear infinite reverse;
  animation-delay: -45801ms;
  animation-duration: 34233ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(18) .flip_rotate {
  transform: rotateX(77deg);
}

.rotate:nth-of-type(18) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(18) .flip {
  left: calc(30% + 70px);
}

.rotate:nth-of-type(19) {
  animation: rotation linear infinite reverse;
  animation-delay: -48451ms;
  animation-duration: 30722ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(19) .flip_rotate {
  transform: rotateX(53deg);
}

.rotate:nth-of-type(19) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(19) .flip {
  left: calc(30% + 104px);
}

.rotate:nth-of-type(20) {
  animation: rotation linear infinite reverse;
  animation-delay: -46932ms;
  animation-duration: 23746ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(20) .flip_rotate {
  transform: rotateX(44deg);
}

.rotate:nth-of-type(20) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(20) .flip {
  left: calc(30% + 52px);
}

.rotate:nth-of-type(21) {
  animation: rotation linear infinite reverse;
  animation-delay: -49884ms;
  animation-duration: 37786ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(21) .flip_rotate {
  transform: rotateX(76deg);
}

.rotate:nth-of-type(21) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(21) .flip {
  left: calc(30% + 99px);
}

.rotate:nth-of-type(22) {
  animation: rotation linear infinite reverse;
  animation-delay: -48408ms;
  animation-duration: 32778ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(22) .flip_rotate {
  transform: rotateX(7deg);
}

.rotate:nth-of-type(22) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(22) .flip {
  left: calc(30% + 99px);
}

.rotate:nth-of-type(23) {
  animation: rotation linear infinite reverse;
  animation-delay: -45273ms;
  animation-duration: 43957ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(23) .flip_rotate {
  transform: rotateX(49deg);
}

.rotate:nth-of-type(23) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(23) .flip {
  left: calc(30% + 125px);
}

.rotate:nth-of-type(24) {
  animation: rotation linear infinite reverse;
  animation-delay: -48627ms;
  animation-duration: 36281ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(24) .flip_rotate {
  transform: rotateX(38deg);
}

.rotate:nth-of-type(24) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(24) .flip {
  left: calc(30% + 122px);
}

.rotate:nth-of-type(25) {
  animation: rotation linear infinite reverse;
  animation-delay: -49731ms;
  animation-duration: 34727ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(25) .flip_rotate {
  transform: rotateX(22deg);
}

.rotate:nth-of-type(25) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(25) .flip {
  left: calc(30% + 95px);
}

.rotate:nth-of-type(26) {
  animation: rotation linear infinite reverse;
  animation-delay: -48654ms;
  animation-duration: 48050ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(26) .flip_rotate {
  transform: rotateX(25deg);
}

.rotate:nth-of-type(26) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(26) .flip {
  left: calc(30% + 70px);
}

.rotate:nth-of-type(27) {
  animation: rotation linear infinite reverse;
  animation-delay: -42954ms;
  animation-duration: 35867ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(27) .flip_rotate {
  transform: rotateX(53deg);
}

.rotate:nth-of-type(27) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(27) .flip {
  left: calc(30% + 74px);
}

.rotate:nth-of-type(28) {
  animation: rotation linear infinite reverse;
  animation-delay: -42490ms;
  animation-duration: 51017ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(28) .flip_rotate {
  transform: rotateX(71deg);
}

.rotate:nth-of-type(28) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(28) .flip {
  left: calc(30% + 119px);
}

.rotate:nth-of-type(29) {
  animation: rotation linear infinite reverse;
  animation-delay: -44587ms;
  animation-duration: 43417ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(29) .flip_rotate {
  transform: rotateX(47deg);
}

.rotate:nth-of-type(29) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(29) .flip {
  left: calc(30% + 112px);
}

.rotate:nth-of-type(30) {
  animation: rotation linear infinite reverse;
  animation-delay: -45001ms;
  animation-duration: 52805ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(30) .flip_rotate {
  transform: rotateX(88deg);
}

.rotate:nth-of-type(30) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(30) .flip {
  left: calc(30% + 75px);
}

.rotate:nth-of-type(31) {
  animation: rotation linear infinite reverse;
  animation-delay: -47221ms;
  animation-duration: 30211ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(31) .flip_rotate {
  transform: rotateX(21deg);
}

.rotate:nth-of-type(31) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(31) .flip {
  left: calc(30% + 63px);
}

.rotate:nth-of-type(32) {
  animation: rotation linear infinite reverse;
  animation-delay: -45716ms;
  animation-duration: 53437ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(32) .flip_rotate {
  transform: rotateX(38deg);
}

.rotate:nth-of-type(32) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(32) .flip {
  left: calc(30% + 109px);
}

.rotate:nth-of-type(33) {
  animation: rotation linear infinite reverse;
  animation-delay: -48789ms;
  animation-duration: 35461ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(33) .flip_rotate {
  transform: rotateX(75deg);
}

.rotate:nth-of-type(33) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(33) .flip {
  left: calc(30% + 107px);
}

.rotate:nth-of-type(34) {
  animation: rotation linear infinite reverse;
  animation-delay: -44449ms;
  animation-duration: 49880ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(34) .flip_rotate {
  transform: rotateX(51deg);
}

.rotate:nth-of-type(34) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(34) .flip {
  left: calc(30% + 69px);
}

.rotate:nth-of-type(35) {
  animation: rotation linear infinite reverse;
  animation-delay: -49108ms;
  animation-duration: 21114ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(35) .flip_rotate {
  transform: rotateX(65deg);
}

.rotate:nth-of-type(35) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(35) .flip {
  left: calc(30% + 106px);
}

.rotate:nth-of-type(36) {
  animation: rotation linear infinite reverse;
  animation-delay: -48886ms;
  animation-duration: 55740ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(36) .flip_rotate {
  transform: rotateX(84deg);
}

.rotate:nth-of-type(36) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(36) .flip {
  left: calc(30% + 122px);
}

.rotate:nth-of-type(37) {
  animation: rotation linear infinite reverse;
  animation-delay: -49902ms;
  animation-duration: 47575ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(37) .flip_rotate {
  transform: rotateX(31deg);
}

.rotate:nth-of-type(37) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(37) .flip {
  left: calc(30% + 129px);
}

.rotate:nth-of-type(38) {
  animation: rotation linear infinite reverse;
  animation-delay: -45935ms;
  animation-duration: 39647ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(38) .flip_rotate {
  transform: rotateX(38deg);
}

.rotate:nth-of-type(38) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(38) .flip {
  left: calc(30% + 103px);
}

.rotate:nth-of-type(39) {
  animation: rotation linear infinite reverse;
  animation-delay: -40833ms;
  animation-duration: 23340ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(39) .flip_rotate {
  transform: rotateX(31deg);
}

.rotate:nth-of-type(39) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(39) .flip {
  left: calc(30% + 130px);
}

.rotate:nth-of-type(40) {
  animation: rotation linear infinite reverse;
  animation-delay: -45673ms;
  animation-duration: 54289ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(40) .flip_rotate {
  transform: rotateX(70deg);
}

.rotate:nth-of-type(40) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(40) .flip {
  left: calc(30% + 85px);
}

.rotate:nth-of-type(41) {
  animation: rotation linear infinite reverse;
  animation-delay: -42603ms;
  animation-duration: 23368ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(41) .flip_rotate {
  transform: rotateX(81deg);
}

.rotate:nth-of-type(41) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(41) .flip {
  left: calc(30% + 62px);
}

.rotate:nth-of-type(42) {
  animation: rotation linear infinite reverse;
  animation-delay: -40823ms;
  animation-duration: 31743ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(42) .flip_rotate {
  transform: rotateX(37deg);
}

.rotate:nth-of-type(42) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(42) .flip {
  left: calc(30% + 130px);
}

.rotate:nth-of-type(43) {
  animation: rotation linear infinite reverse;
  animation-delay: -43866ms;
  animation-duration: 53436ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(43) .flip_rotate {
  transform: rotateX(33deg);
}

.rotate:nth-of-type(43) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(43) .flip {
  left: calc(30% + 116px);
}

.rotate:nth-of-type(44) {
  animation: rotation linear infinite reverse;
  animation-delay: -43026ms;
  animation-duration: 53169ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(44) .flip_rotate {
  transform: rotateX(86deg);
}

.rotate:nth-of-type(44) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(44) .flip {
  left: calc(30% + 124px);
}

.rotate:nth-of-type(45) {
  animation: rotation linear infinite reverse;
  animation-delay: -49072ms;
  animation-duration: 33614ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(45) .flip_rotate {
  transform: rotateX(54deg);
}

.rotate:nth-of-type(45) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(45) .flip {
  left: calc(30% + 87px);
}

.rotate:nth-of-type(46) {
  animation: rotation linear infinite reverse;
  animation-delay: -49939ms;
  animation-duration: 21400ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(46) .flip_rotate {
  transform: rotateX(47deg);
}

.rotate:nth-of-type(46) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(46) .flip {
  left: calc(30% + 76px);
}

.rotate:nth-of-type(47) {
  animation: rotation linear infinite reverse;
  animation-delay: -47188ms;
  animation-duration: 25797ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(47) .flip_rotate {
  transform: rotateX(31deg);
}

.rotate:nth-of-type(47) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(47) .flip {
  left: calc(30% + 112px);
}

.rotate:nth-of-type(48) {
  animation: rotation linear infinite reverse;
  animation-delay: -49445ms;
  animation-duration: 23878ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(48) .flip_rotate {
  transform: rotateX(7deg);
}

.rotate:nth-of-type(48) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(48) .flip {
  left: calc(30% + 67px);
}

.rotate:nth-of-type(49) {
  animation: rotation linear infinite reverse;
  animation-delay: -45149ms;
  animation-duration: 44238ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(49) .flip_rotate {
  transform: rotateX(81deg);
}

.rotate:nth-of-type(49) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(49) .flip {
  left: calc(30% + 53px);
}

.rotate:nth-of-type(50) {
  animation: rotation linear infinite reverse;
  animation-delay: -48310ms;
  animation-duration: 32754ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(50) .flip_rotate {
  transform: rotateX(54deg);
}

.rotate:nth-of-type(50) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(50) .flip {
  left: calc(30% + 81px);
}

.rotate:nth-of-type(51) {
  animation: rotation linear infinite reverse;
  animation-delay: -48502ms;
  animation-duration: 44853ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(51) .flip_rotate {
  transform: rotateX(40deg);
}

.rotate:nth-of-type(51) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(51) .flip {
  left: calc(30% + 89px);
}

.rotate:nth-of-type(52) {
  animation: rotation linear infinite reverse;
  animation-delay: -43302ms;
  animation-duration: 54104ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(52) .flip_rotate {
  transform: rotateX(59deg);
}

.rotate:nth-of-type(52) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(52) .flip {
  left: calc(30% + 61px);
}

.rotate:nth-of-type(53) {
  animation: rotation linear infinite reverse;
  animation-delay: -40312ms;
  animation-duration: 46590ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(53) .flip_rotate {
  transform: rotateX(62deg);
}

.rotate:nth-of-type(53) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(53) .flip {
  left: calc(30% + 117px);
}

.rotate:nth-of-type(54) {
  animation: rotation linear infinite reverse;
  animation-delay: -43313ms;
  animation-duration: 58353ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(54) .flip_rotate {
  transform: rotateX(33deg);
}

.rotate:nth-of-type(54) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(54) .flip {
  left: calc(30% + 101px);
}

.rotate:nth-of-type(55) {
  animation: rotation linear infinite reverse;
  animation-delay: -46304ms;
  animation-duration: 47003ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(55) .flip_rotate {
  transform: rotateX(40deg);
}

.rotate:nth-of-type(55) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(55) .flip {
  left: calc(30% + 79px);
}

.rotate:nth-of-type(56) {
  animation: rotation linear infinite reverse;
  animation-delay: -44589ms;
  animation-duration: 43954ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(56) .flip_rotate {
  transform: rotateX(3deg);
}

.rotate:nth-of-type(56) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(56) .flip {
  left: calc(30% + 73px);
}

.rotate:nth-of-type(57) {
  animation: rotation linear infinite reverse;
  animation-delay: -45377ms;
  animation-duration: 58400ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(57) .flip_rotate {
  transform: rotateX(12deg);
}

.rotate:nth-of-type(57) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(57) .flip {
  left: calc(30% + 115px);
}

.rotate:nth-of-type(58) {
  animation: rotation linear infinite reverse;
  animation-delay: -45559ms;
  animation-duration: 59412ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(58) .flip_rotate {
  transform: rotateX(21deg);
}

.rotate:nth-of-type(58) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(58) .flip {
  left: calc(30% + 130px);
}

.rotate:nth-of-type(59) {
  animation: rotation linear infinite reverse;
  animation-delay: -46849ms;
  animation-duration: 34044ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(59) .flip_rotate {
  transform: rotateX(36deg);
}

.rotate:nth-of-type(59) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(59) .flip {
  left: calc(30% + 57px);
}

.rotate:nth-of-type(60) {
  animation: rotation linear infinite reverse;
  animation-delay: -47362ms;
  animation-duration: 37091ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(60) .flip_rotate {
  transform: rotateX(17deg);
}

.rotate:nth-of-type(60) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(60) .flip {
  left: calc(30% + 111px);
}

.rotate:nth-of-type(61) {
  animation: rotation linear infinite reverse;
  animation-delay: -43158ms;
  animation-duration: 58591ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(61) .flip_rotate {
  transform: rotateX(19deg);
}

.rotate:nth-of-type(61) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(61) .flip {
  left: calc(30% + 112px);
}

.rotate:nth-of-type(62) {
  animation: rotation linear infinite reverse;
  animation-delay: -41800ms;
  animation-duration: 31738ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(62) .flip_rotate {
  transform: rotateX(4deg);
}

.rotate:nth-of-type(62) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(62) .flip {
  left: calc(30% + 58px);
}

.rotate:nth-of-type(63) {
  animation: rotation linear infinite reverse;
  animation-delay: -44588ms;
  animation-duration: 50634ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(63) .flip_rotate {
  transform: rotateX(3deg);
}

.rotate:nth-of-type(63) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(63) .flip {
  left: calc(30% + 93px);
}

.rotate:nth-of-type(64) {
  animation: rotation linear infinite reverse;
  animation-delay: -45990ms;
  animation-duration: 33517ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(64) .flip_rotate {
  transform: rotateX(60deg);
}

.rotate:nth-of-type(64) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(64) .flip {
  left: calc(30% + 117px);
}

.rotate:nth-of-type(65) {
  animation: rotation linear infinite reverse;
  animation-delay: -44142ms;
  animation-duration: 37422ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(65) .flip_rotate {
  transform: rotateX(34deg);
}

.rotate:nth-of-type(65) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(65) .flip {
  left: calc(30% + 64px);
}

.rotate:nth-of-type(66) {
  animation: rotation linear infinite reverse;
  animation-delay: -47601ms;
  animation-duration: 21387ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(66) .flip_rotate {
  transform: rotateX(89deg);
}

.rotate:nth-of-type(66) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(66) .flip {
  left: calc(30% + 111px);
}

.rotate:nth-of-type(67) {
  animation: rotation linear infinite reverse;
  animation-delay: -40179ms;
  animation-duration: 53143ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(67) .flip_rotate {
  transform: rotateX(14deg);
}

.rotate:nth-of-type(67) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(67) .flip {
  left: calc(30% + 106px);
}

.rotate:nth-of-type(68) {
  animation: rotation linear infinite reverse;
  animation-delay: -44627ms;
  animation-duration: 58528ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(68) .flip_rotate {
  transform: rotateX(43deg);
}

.rotate:nth-of-type(68) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(68) .flip {
  left: calc(30% + 110px);
}

.rotate:nth-of-type(69) {
  animation: rotation linear infinite reverse;
  animation-delay: -44766ms;
  animation-duration: 28043ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(69) .flip_rotate {
  transform: rotateX(70deg);
}

.rotate:nth-of-type(69) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(69) .flip {
  left: calc(30% + 83px);
}

.rotate:nth-of-type(70) {
  animation: rotation linear infinite reverse;
  animation-delay: -42261ms;
  animation-duration: 59628ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(70) .flip_rotate {
  transform: rotateX(16deg);
}

.rotate:nth-of-type(70) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(70) .flip {
  left: calc(30% + 78px);
}

.rotate:nth-of-type(71) {
  animation: rotation linear infinite reverse;
  animation-delay: -41668ms;
  animation-duration: 51883ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(71) .flip_rotate {
  transform: rotateX(11deg);
}

.rotate:nth-of-type(71) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(71) .flip {
  left: calc(30% + 59px);
}

.rotate:nth-of-type(72) {
  animation: rotation linear infinite reverse;
  animation-delay: -48803ms;
  animation-duration: 42354ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(72) .flip_rotate {
  transform: rotateX(18deg);
}

.rotate:nth-of-type(72) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(72) .flip {
  left: calc(30% + 71px);
}

.rotate:nth-of-type(73) {
  animation: rotation linear infinite reverse;
  animation-delay: -48643ms;
  animation-duration: 33200ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(73) .flip_rotate {
  transform: rotateX(70deg);
}

.rotate:nth-of-type(73) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(73) .flip {
  left: calc(30% + 96px);
}

.rotate:nth-of-type(74) {
  animation: rotation linear infinite reverse;
  animation-delay: -41898ms;
  animation-duration: 57972ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(74) .flip_rotate {
  transform: rotateX(27deg);
}

.rotate:nth-of-type(74) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(74) .flip {
  left: calc(30% + 127px);
}

.rotate:nth-of-type(75) {
  animation: rotation linear infinite reverse;
  animation-delay: -40737ms;
  animation-duration: 28984ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(75) .flip_rotate {
  transform: rotateX(6deg);
}

.rotate:nth-of-type(75) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(75) .flip {
  left: calc(30% + 114px);
}

.rotate:nth-of-type(76) {
  animation: rotation linear infinite reverse;
  animation-delay: -46793ms;
  animation-duration: 29786ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(76) .flip_rotate {
  transform: rotateX(75deg);
}

.rotate:nth-of-type(76) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(76) .flip {
  left: calc(30% + 91px);
}

.rotate:nth-of-type(77) {
  animation: rotation linear infinite reverse;
  animation-delay: -44097ms;
  animation-duration: 30513ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(77) .flip_rotate {
  transform: rotateX(70deg);
}

.rotate:nth-of-type(77) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(77) .flip {
  left: calc(30% + 78px);
}

.rotate:nth-of-type(78) {
  animation: rotation linear infinite reverse;
  animation-delay: -42594ms;
  animation-duration: 48192ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(78) .flip_rotate {
  transform: rotateX(82deg);
}

.rotate:nth-of-type(78) .flip_pos {
  transform: translateY(600px);
}

.rotate:nth-of-type(78) .flip {
  left: calc(30% + 112px);
}

.rotate:nth-of-type(79) {
  animation: rotation linear infinite reverse;
  animation-delay: -43658ms;
  animation-duration: 39717ms;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotate:nth-of-type(79) .flip_rotate {
  transform: rotateX(72deg);
}

.rotate:nth-of-type(79) .flip_pos {
  transform: translateY(600.........完整代码请登录后点击上方下载按钮下载查看