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);
}

.ro.........完整代码请登录后点击上方下载按钮下载查看