粒子漂浮旋转动画效果-html代码-BFW代码库

代码语言：html
所属分类：粒子
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Perticle Rotation #03</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, #fdb7b9 20%, #de5d6f 50%, #b1414d);
}

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

.container {
  perspective: 280px;
}
.container_rotate {
  transform: rotate(24deg);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rotate:nth-of-type(67) {
  animation: rotation linear infinite reverse;
  animation-delay: -40106ms;
  animation-duration: 53208ms;
}
@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(227px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rotate:nth-of-type(80) {
  animation: rotation linear infinite reverse;
.........完整代码请登录后点击上方下载按钮下载查看