div+css实现多彩粒子风暴效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：div+css实现多彩粒子风暴效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<style>
body {
  background: #222;
  height: 100vh;
  overflow: hidden;
  perspective: 1000px;
}

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

.field {
  width: 100%;
  height: 100%;
}

.stars {
  width: 100%;
  height: 100%;
}

.star {
  top: 50%;
  left: 50%;
}
.star:nth-child(1) .drive.-up {
  -webkit-animation-delay: -8307ms;
          animation-delay: -8307ms;
}
.star:nth-child(1) .drive.-scale {
  -webkit-animation-delay: -8307ms;
          animation-delay: -8307ms;
}
.star:nth-child(1) .drive.-rotate, .star:nth-child(1) .drive.-reverse, .star:nth-child(1) .drive.-angle, .star:nth-child(1) .drive.-rubber {
  -webkit-animation-delay: -14700ms;
          animation-delay: -14700ms;
}
.star:nth-child(1) .drive.-radius {
  transform: translateX(304px);
}
.star:nth-child(1) .graphic {
  background: rgba(249, 224, 231, 0.7);
}
.star:nth-child(2) .drive.-up {
  -webkit-animation-delay: -69793ms;
          animation-delay: -69793ms;
}
.star:nth-child(2) .drive.-scale {
  -webkit-animation-delay: -69793ms;
          animation-delay: -69793ms;
}
.star:nth-child(2) .drive.-rotate, .star:nth-child(2) .drive.-reverse, .star:nth-child(2) .drive.-angle, .star:nth-child(2) .drive.-rubber {
  -webkit-animation-delay: -34653ms;
          animation-delay: -34653ms;
}
.star:nth-child(2) .drive.-radius {
  transform: translateX(287px);
}
.star:nth-child(2) .graphic {
  background: rgba(212, 105, 249, 0.7);
}
.star:nth-child(3) .drive.-up {
  -webkit-animation-delay: -62003ms;
          animation-delay: -62003ms;
}
.star:nth-child(3) .drive.-scale {
  -webkit-animation-delay: -62003ms;
          animation-delay: -62003ms;
}
.star:nth-child(3) .drive.-rotate, .star:nth-child(3) .drive.-reverse, .star:nth-child(3) .drive.-angle, .star:nth-child(3) .drive.-rubber {
  -webkit-animation-delay: -58573ms;
          animation-delay: -58573ms;
}
.star:nth-child(3) .drive.-radius {
  transform: translateX(328px);
}
.star:nth-child(3) .graphic {
  background: rgba(150, 113, 242, 0.7);
}
.star:nth-child(4) .drive.-up {
  -webkit-animation-delay: -66910ms;
          animation-delay: -66910ms;
}
.star:nth-child(4) .drive.-scale {
  -webkit-animation-delay: -66910ms;
          animation-delay: -66910ms;
}
.star:nth-child(4) .drive.-rotate, .star:nth-child(4) .drive.-reverse, .star:nth-child(4) .drive.-angle, .star:nth-child(4) .drive.-rubber {
  -webkit-animation-delay: -39138ms;
          animation-delay: -39138ms;
}
.star:nth-child(4) .drive.-radius {
  transform: translateX(345px);
}
.star:nth-child(4) .graphic {
  background: rgba(123, 252, 245, 0.7);
}
.star:nth-child(5) .drive.-up {
  -webkit-animation-delay: -43805ms;
          animation-delay: -43805ms;
}
.star:nth-child(5) .drive.-scale {
  -webkit-animation-delay: -43805ms;
          animation-delay: -43805ms;
}
.star:nth-child(5) .drive.-rotate, .star:nth-child(5) .drive.-reverse, .star:nth-child(5) .drive.-angle, .star:nth-child(5) .drive.-rubber {
  -webkit-animation-delay: -72308ms;
          animation-delay: -72308ms;
}
.star:nth-child(5) .drive.-radius {
  transform: translateX(103px);
}
.star:nth-child(5) .graphic {
  background: rgba(146, 101, 208, 0.7);
}
.star:nth-child(6) .drive.-up {
  -webkit-animation-delay: -56617ms;
          animation-delay: -56617ms;
}
.star:nth-child(6) .drive.-scale {
  -webkit-animation-delay: -56617ms;
          animation-delay: -56617ms;
}
.star:nth-child(6) .drive.-rotate, .star:nth-child(6) .drive.-reverse, .star:nth-child(6) .drive.-angle, .star:nth-child(6) .drive.-rubber {
  -webkit-animation-delay: -95177ms;
          animation-delay: -95177ms;
}
.star:nth-child(6) .drive.-radius {
  transform: translateX(316px);
}
.star:nth-child(6) .graphic {
  background: rgba(163, 155, 208, 0.7);
}
.star:nth-child(7) .drive.-up {
  -webkit-animation-delay: -61068ms;
          animation-delay: -61068ms;
}
.star:nth-child(7) .drive.-scale {
  -webkit-animation-delay: -61068ms;
          animation-delay: -61068ms;
}
.star:nth-child(7) .drive.-rotate, .star:nth-child(7) .drive.-reverse, .star:nth-child(7) .drive.-angle, .star:nth-child(7) .drive.-rubber {
  -webkit-animation-delay: -67096ms;
          animation-delay: -67096ms;
}
.star:nth-child(7) .drive.-radius {
  transform: translateX(238px);
}
.star:nth-child(7) .graphic {
  background: rgba(228, 111, 245, 0.7);
}
.star:nth-child(8) .drive.-up {
  -webkit-animation-delay: -20204ms;
          animation-delay: -20204ms;
}
.star:nth-child(8) .drive.-scale {
  -webkit-animation-delay: -20204ms;
          animation-delay: -20204ms;
}
.star:nth-child(8) .drive.-rotate, .star:nth-child(8) .drive.-reverse, .star:nth-child(8) .drive.-angle, .star:nth-child(8) .drive.-rubber {
  -webkit-animation-delay: -26054ms;
          animation-delay: -26054ms;
}
.star:nth-child(8) .drive.-radius {
  transform: translateX(208px);
}
.star:nth-child(8) .graphic {
  background: rgba(113, 167, 246, 0.7);
}
.star:nth-child(9) .drive.-up {
  -webkit-animation-delay: -43986ms;
          animation-delay: -43986ms;
}
.star:nth-child(9) .drive.-scale {
  -webkit-animation-delay: -43986ms;
          animation-delay: -43986ms;
}
.star:nth-child(9) .drive.-rotate, .star:nth-child(9) .drive.-reverse, .star:nth-child(9) .drive.-angle, .star:nth-child(9) .drive.-rubber {
  -webkit-animation-delay: -68512ms;
          animation-delay: -68512ms;
}
.star:nth-child(9) .drive.-radius {
  transform: translateX(125px);
}
.star:nth-child(9) .graphic {
  background: rgba(128, 175, 217, 0.7);
}
.star:nth-child(10) .drive.-up {
  -webkit-animation-delay: -45631ms;
          animation-delay: -45631ms;
}
.star:nth-child(10) .drive.-scale {
  -webkit-animation-delay: -45631ms;
          animation-delay: -45631ms;
}
.star:nth-child(10) .drive.-rotate, .star:nth-child(10) .drive.-reverse, .star:nth-child(10) .drive.-angle, .star:nth-child(10) .drive.-rubber {
  -webkit-animation-delay: -20082ms;
          animation-delay: -20082ms;
}
.star:nth-child(10) .drive.-radius {
  transform: translateX(349px);
}
.star:nth-child(10) .graphic {
  background: rgba(220, 215, 231, 0.7);
}
.star:nth-child(11) .drive.-up {
  -webkit-animation-delay: -12153ms;
          animation-delay: -12153ms;
}
.star:nth-child(11) .drive.-scale {
  -webkit-animation-delay: -12153ms;
          animation-delay: -12153ms;
}
.star:nth-child(11) .drive.-rotate, .star:nth-child(11) .drive.-reverse, .star:nth-child(11) .drive.-angle, .star:nth-child(11) .drive.-rubber {
  -webkit-animation-delay: -83608ms;
          animation-delay: -83608ms;
}
.star:nth-child(11) .drive.-radius {
  transform: translateX(231px);
}
.star:nth-child(11) .graphic {
  background: rgba(178, 169, 202, 0.7);
}
.star:nth-child(12) .drive.-up {
  -webkit-animation-delay: -59018ms;
          animation-delay: -59018ms;
}
.star:nth-child(12) .drive.-scale {
  -webkit-animation-delay: -59018ms;
          animation-delay: -59018ms;
}
.star:nth-child(12) .drive.-rotate, .star:nth-child(12) .drive.-reverse, .star:nth-child(12) .drive.-angle, .star:nth-child(12) .drive.-rubber {
  -webkit-animation-delay: -35822ms;
          animation-delay: -35822ms;
}
.star:nth-child(12) .drive.-radius {
  transform: translateX(182px);
}
.star:nth-child(12) .graphic {
  background: rgba(129, 136, 204, 0.7);
}
.star:nth-child(13) .drive.-up {
  -webkit-animation-delay: -84450ms;
          animation-delay: -84450ms;
}
.star:nth-child(13) .drive.-scale {
  -webkit-animation-delay: -84450ms;
          animation-delay: -84450ms;
}
.star:nth-child(13) .drive.-rotate, .star:nth-child(13) .drive.-reverse, .star:nth-child(13) .drive.-angle, .star:nth-child(13) .drive.-rubber {
  -webkit-animation-delay: -45697ms;
          animation-delay: -45697ms;
}
.star:nth-child(13) .drive.-radius {
  transform: translateX(199px);
}
.star:nth-child(13) .graphic {
  background: rgba(168, 242, 230, 0.7);
}
.star:nth-child(14) .drive.-up {
  -webkit-animation-delay: -38048ms;
          animation-delay: -38048ms;
}
.star:nth-child(14) .drive.-scale {
  -webkit-animation-delay: -38048ms;
          animation-delay: -38048ms;
}
.star:nth-child(14) .drive.-rotate, .star:nth-child(14) .drive.-reverse, .star:nth-child(14) .drive.-angle, .star:nth-child(14) .drive.-rubber {
  -webkit-animation-delay: -81715ms;
          animation-delay: -81715ms;
}
.star:nth-child(14) .drive.-radius {
  transform: translateX(128px);
}
.star:nth-child(14) .graphic {
  background: rgba(123, 174, 243, 0.7);
}
.star:nth-child(15) .drive.-up {
  -webkit-animation-delay: -56645ms;
          animation-delay: -56645ms;
}
.star:nth-child(15) .drive.-scale {
  -webkit-animation-delay: -56645ms;
          animation-delay: -56645ms;
}
.star:nth-child(15) .drive.-rotate, .star:nth-child(15) .drive.-reverse, .star:nth-child(15) .drive.-angle, .star:nth-child(15) .drive.-rubber {
  -webkit-animation-delay: -57496ms;
          animation-delay: -57496ms;
}
.star:nth-child(15) .drive.-radius {
  transform: translateX(219px);
}
.star:nth-child(15) .graphic {
  background: rgba(116, 248, 223, 0.7);
}
.star:nth-child(16) .drive.-up {
  -webkit-animation-delay: -53100ms;
          animation-delay: -53100ms;
}
.star:nth-child(16) .drive.-scale {
  -webkit-animation-delay: -53100ms;
          animation-delay: -53100ms;
}
.star:nth-child(16) .drive.-rotate, .star:nth-child(16) .drive.-reverse, .star:nth-child(16) .drive.-angle, .star:nth-child(16) .drive.-rubber {
  -webkit-animation-delay: -8779ms;
          animation-delay: -8779ms;
}
.star:nth-child(16) .drive.-radius {
  transform: translateX(200px);
}
.star:nth-child(16) .graphic {
  background: rgba(190, 161, 206, 0.7);
}
.star:nth-child(17) .drive.-up {
  -webkit-animation-delay: -78965ms;
          animation-delay: -78965ms;
}
.star:nth-child(17) .drive.-scale {
  -webkit-animation-delay: -78965ms;
          animation-delay: -78965ms;
}
.star:nth-child(17) .drive.-rotate, .star:nth-child(17) .drive.-reverse, .star:nth-child(17) .drive.-angle, .star:nth-child(17) .drive.-rubber {
  -webkit-animation-delay: -2470ms;
          animation-delay: -2470ms;
}
.star:nth-child(17) .drive.-radius {
  transform: translateX(198px);
}
.star:nth-child(17) .graphic {
  background: rgba(156, 150, 229, 0.7);
}
.star:nth-child(18) .drive.-up {
  -webkit-animation-delay: -23089ms;
          animation-delay: -23089ms;
}
.star:nth-child(18) .drive.-scale {
  -webkit-animation-delay: -23089ms;
          animation-delay: -23089ms;
}
.star:nth-child(18) .drive.-rotate, .star:nth-child(18) .drive.-reverse, .star:nth-child(18) .drive.-angle, .star:nth-child(18) .drive.-rubber {
  -webkit-animation-delay: -38463ms;
          animation-delay: -38463ms;
}
.star:nth-child(18) .drive.-radius {
  transform: translateX(205px);
}
.star:nth-child(18) .graphic {
  background: rgba(193, 143, 252, 0.7);
}
.star:nth-child(19) .drive.-up {
  -webkit-animation-delay: -18335ms;
          animation-delay: -18335ms;
}
.star:nth-child(19) .drive.-scale {
  -webkit-animation-delay: -18335ms;
          animation-delay: -18335ms;
}
.star:nth-child(19) .drive.-rotate, .star:nth-child(19) .drive.-reverse, .star:nth-child(19) .drive.-angle, .star:nth-child(19) .drive.-rubber {
  -webkit-animation-delay: -78247ms;
          animation-delay: -78247ms;
}
.star:nth-child(19) .drive.-radius {
  transform: translateX(158px);
}
.star:nth-child(19) .graphic {
  background: rgba(150, 169, 201, 0.7);
}
.star:nth-child(20) .drive.-up {
  -webkit-animation-delay: -81905ms;
          animation-delay: -81905ms;
}
.star:nth-child(20) .drive.-scale {
  -webkit-animation-delay: -81905ms;
          animation-delay: -81905ms;
}
.star:nth-child(20) .drive.-rotate, .star:nth-child(20) .drive.-reverse, .star:nth-child(20) .drive.-angle, .star:nth-child(20) .drive.-rubber {
  -webkit-animation-delay: -32806ms;
          animation-delay: -32806ms;
}
.star:nth-child(20) .drive.-radius {
  transform: translateX(338px);
}
.star:nth-child(20) .graphic {
  background: rgba(150, 244, 224, 0.7);
}
.star:nth-child(21) .drive.-up {
  -webkit-animation-delay: -83160ms;
          animation-delay: -83160ms;
}
.star:nth-child(21) .drive.-scale {
  -webkit-animation-delay: -83160ms;
          animation-delay: -83160ms;
}
.star:nth-child(21) .drive.-rotate, .star:nth-child(21) .drive.-reverse, .star:nth-child(21) .drive.-angle, .star:nth-child(21) .drive.-rubber {
  -webkit-animation-delay: -27150ms;
          animation-delay: -27150ms;
}
.star:nth-child(21) .drive.-radius {
  transform: translateX(294px);
}
.star:nth-child(21) .graphic {
  background: rgba(186, 209, 234, 0.7);
}
.star:nth-child(22) .drive.-up {
  -webkit-animation-delay: -77669ms;
          animation-delay: -77669ms;
}
.star:nth-child(22) .drive.-scale {
  -webkit-animation-delay: -77669ms;
          animation-delay: -77669ms;
}
.star:nth-child(22) .drive.-rotate, .star:nth-child(22) .drive.-reverse, .star:nth-child(22) .drive.-angle, .star:nth-child(22) .drive.-rubber {
  -webkit-animation-delay: -77860ms;
          animation-delay: -77860ms;
}
.star:nth-child(22) .drive.-radius {
  transform: translateX(220px);
}
.star:nth-child(22) .graphic {
  background: rgba(102, 139, 205, 0.7);
}
.star:nth-child(23) .drive.-up {
  -webkit-animation-delay: -67392ms;
          animation-delay: -67392ms;
}
.star:nth-child(23) .drive.-scale {
  -webkit-animation-delay: -67392ms;
          animation-delay: -67392ms;
}
.star:nth-child(23) .drive.-rotate, .star:nth-child(23) .drive.-reverse, .star:nth-child(23) .drive.-angle, .star:nth-child(23) .drive.-rubber {
  -webkit-animation-delay: -74274ms;
          animation-delay: -74274ms;
}
.star:nth-child(23) .drive.-radius {
  transform: translateX(242px);
}
.star:nth-child(23) .graphic {
  background: rgba(153, 159, 242, 0.7);
}
.star:nth-child(24) .drive.-up {
  -webkit-animation-delay: -47111ms;
          animation-delay: -47111ms;
}
.star:nth-child(24) .drive.-scale {
  -webkit-animation-delay: -47111ms;
          animation-delay: -47111ms;
}
.star:nth-child(24) .drive.-rotate, .star:nth-child(24) .drive.-reverse, .star:nth-child(24) .drive.-angle, .star:nth-child(24) .drive.-rubber {
  -webkit-animation-delay: -65443ms;
          animation-delay: -65443ms;
}
.star:nth-child(24) .drive.-radius {
  transform: translateX(172px);
}
.star:nth-child(24) .graphic {
  background: rgba(122, 135, 219, 0.7);
}
.star:nth-child(25) .drive.-up {
  -webkit-animation-delay: -57565ms;
          animation-delay: -57565ms;
}
.star:nth-child(25) .drive.-scale {
  -webkit-animation-delay: -57565ms;
          animation-delay: -57565ms;
}
.star:nth-child(25) .drive.-rotate, .star:nth-child(25) .drive.-reverse, .star:nth-child(25) .drive.-angle, .star:nth-child(25) .drive.-rubber {
  -webkit-animation-delay: -52195ms;
          animation-delay: -52195ms;
}
.star:nth-child(25) .drive.-radius {
  transform: translateX(306px);
}
.star:nth-child(25) .graphic {
  background: rgba(157, 103, 241, 0.7);
}
.star:nth-child(26) .drive.-up {
  -webkit-animation-delay: -5699ms;
          animation-delay: -5699ms;
}
.star:nth-child(26) .drive.-scale {
  -webkit-animation-delay: -5699ms;
          animation-delay: -5699ms;
}
.star:nth-child(26) .drive.-rotate, .star:nth-child(26) .drive.-reverse, .star:nth-child(26) .drive.-angle, .star:nth-child(26) .drive.-rubber {
  -webkit-animation-delay: -92640ms;
          animation-delay: -92640ms;
}
.star:nth-child(26) .drive.-radius {
  transform: translateX(131px);
}
.star:nth-child(26) .graphic {
  background: rgba(115, 253, 254, 0.7);
}
.star:nth-child(27) .drive.-up {
  -webkit-animation-delay: -24935ms;
          animation-delay: -24935ms;
}
.star:nth-child(27) .drive.-scale {
  -webkit-animation-delay: -24935ms;
          animation-delay: -24935ms;
}
.star:nth-child(27) .drive.-rotate, .star:nth-child(27) .drive.-reverse, .star:nth-child(27) .drive.-angle, .star:nth-child(27) .drive.-rubber {
  -webkit-animation-delay: -25005ms;
          animation-delay: -25005ms;
}
.star:nth-child(27) .drive.-radius {
  transform: translateX(166px);
}
.star:nth-child(27) .graphic {
  background: rgba(239, 153, 247, 0.7);
}
.star:nth-child(28) .drive.-up {
  -webkit-animation-delay: -9339ms;
          animation-delay: -9339ms;
}
.star:nth-child(28) .drive.-scale {
  -webkit-animation-delay: -9339ms;
          animation-delay: -9339ms;
}
.star:nth-child(28) .drive.-rotate, .star:nth-child(28) .drive.-reverse, .star:nth-child(28) .drive.-angle, .star:nth-child(28) .drive.-rubber {
  -webkit-animation-delay: -15386ms;
          animation-delay: -15386ms;
}
.star:nth-child(28) .drive.-radius {
  transform: translateX(263px);
}
.star:nth-child(28) .graphic {
  background: rgba(147, 209, 218, 0.7);
}
.star:nth-child(29) .drive.-up {
  -webkit-animation-delay: -75701ms;
          animation-delay: -75701ms;
}
.star:nth-child(29) .drive.-scale {
  -webkit-animation-delay: -75701ms;
          animation-delay: -75701ms;
}
.star:nth-child(29) .drive.-rotate, .star:nth-child(29) .drive.-reverse, .star:nth-child(29) .drive.-angle, .star:nth-child(29) .drive.-rubber {
  -webkit-animation-delay: -32680ms;
          animation-delay: -32680ms;
}
.star:nth-child(29) .drive.-radius {
  transform: translateX(296px);
}
.star:nth-child(29) .graphic {
  background: rgba(247, 150, 232, 0.7);
}
.star:nth-child(30) .drive.-up {
  -webkit-animation-delay: -9644ms;
          animation-delay: -9644ms;
}
.star:nth-child(30) .drive.-scale {
  -webkit-animation-delay: -9644ms;
          animation-delay: -9644ms;
}
.star:nth-child(30) .drive.-rotate, .star:nth-child(30) .drive.-reverse, .star:nth-child(30) .drive.-angle, .star:nth-child(30) .drive.-rubber {
  -webkit-animation-delay: -71325ms;
          animation-delay: -71325ms;
}
.star:nth-child(30) .drive.-radius {
  transform: translateX(171px);
}
.star:nth-child(30) .graphic {
  background: rgba(151, 219, 236, 0.7);
}
.star:nth-child(31) .drive.-up {
  -webkit-animation-delay: -6501ms;
          animation-delay: -6501ms;
}
.star:nth-child(31) .drive.-scale {
  -webkit-animation-delay: -6501ms;
          animation-delay: -6501ms;
}
.star:nth-child(31) .drive.-rotate, .star:nth-child(31) .drive.-reverse, .star:nth-child(31) .drive.-angle, .star:nth-child(31) .drive.-rubber {
  -webkit-animation-delay: -55829ms;
          animation-delay: -55829ms;
}
.star:nth-child(31) .drive.-radius {
  transform: translateX(130px);
}
.star:nth-child(31) .graphic {
  background: rgba(200, 241, 227, 0.7);
}
.star:nth-child(32) .drive.-up {
  -webkit-animation-delay: -18052ms;
          animation-delay: -18052ms;
}
.star:nth-child(32) .drive.-scale {
  -webkit-animation-delay: -18052ms;
          animation-delay: -18052ms;
}
.star:nth-child(32) .drive.-rotate, .star:nth-child(32) .drive.-reverse, .star:nth-child(32) .drive.-angle, .star:nth-child(32) .drive.-rubber {
  -webkit-animation-delay: -44876ms;
          animation-delay: -44876ms;
}
.star:nth-child(32) .drive.-radius {
  transform: translateX(311px);
}
.star:nth-child(32) .graphic {
  background: rgba(104, 144, 217, 0.7);
}
.star:nth-child(33) .drive.-up {
  -webkit-animation-delay: -20699ms;
          animation-delay: -20699ms;
}
.star:nth-child(33) .drive.-scale {
  -webkit-animation-delay: -20699ms;
          animation-delay: -20699ms;
}
.star:nth-child(33) .drive.-rotate, .star:nth-child(33) .drive.-reverse, .star:nth-child(33) .drive.-angle, .star:nth-child(33) .drive.-rubber {
  -webkit-animation-delay: -30188ms;
          animation-delay: -30188ms;
}
.star:nth-child(33) .drive.-radius {
  transform: translateX(302px);
}
.star:nth-child(33) .graphic {
  background: rgba(255, 144, 253, 0.7);
}
.star:nth-child(34) .drive.-up {
  -webkit-animation-delay: -57901ms;
          animation-delay: -57901ms;
}
.star:nth-child(34) .drive.-scale {
  -webkit-animation-delay: -57901ms;
          animation-delay: -57901ms;
}
.star:nth-child(34) .drive.-rotate, .star:nth-child(34) .drive.-reverse, .star:nth-child(34) .drive.-angle, .star:nth-child(34) .drive.-rubber {
  -webkit-animation-delay: -34896ms;
          animation-delay: -34896ms;
}
.star:nth-child(34) .drive.-radius {
  transform: translateX(200px);
}
.star:nth-child(34) .graphic {
  background: rgba(186, 182, 224, 0.7);
}
.star:nth-child(35) .drive.-up {
  -webkit-animation-delay: -49908ms;
          animation-delay: -49908ms;
}
.star:nth-child(35) .drive.-scale {
  -webkit-animation-delay: -49908ms;
          animation-delay: -49908ms;
}
.star:nth-child(35) .drive.-rotate, .star:nth-child(35) .drive.-reverse, .star:nth-child(35) .drive.-angle, .star:nth-child(35) .drive.-rubber {
  -webkit-animation-delay: -46940ms;
          animation-delay: -46940ms;
}
.star:nth-child(35) .drive.-radius {
  transform: translateX(278px);
}
.star:nth-child(35) .graphic {
  background: rgba(184, 197, 207, 0.7);
}
.star:nth-child(36) .drive.-up {
  -webkit-animation-delay: -41710ms;
          animation-delay: -41710ms;
}
.star:nth-child(36) .drive.-scale {
  -webkit-animation-delay: -41710ms;
          animation-delay: -41710ms;
}
.star:nth-child(36) .drive.-rotate, .star:nth-child(36) .drive.-reverse, .star:nth-child(36) .drive.-angle, .star:nth-child(36) .drive.-rubber {
  -webkit-animation-delay: -5012ms;
          animation-delay: -5012ms;
}
.star:nth-child(36) .drive.-radius {
  transform: translateX(256px);
}
.star:nth-child(36) .graphic {
  background: rgba(213, 224, 202, 0.7);
}
.star:nth-child(37) .drive.-up {
  -webkit-animation-delay: -1924ms;
          animation-delay: -1924ms;
}
.star:nth-child(37) .drive.-scale {
  -webkit-animation-delay: -1924ms;
          animation-delay: -1924ms;
}
.star:nth-child(37) .drive.-rotate, .star:nth-child(37) .drive.-reverse, .star:nth-child(37) .drive.-angle, .star:nth-child(37) .drive.-rubber {
  -webkit-animation-delay: -76812ms;
          animation-delay: -76812ms;
}
.star:nth-child(37) .drive.-radius {
  transform: translateX(261px);
}
.star:nth-child(37) .graphic {
  background: rgba(177, 135, 236, 0.7);
}
.star:nth-child(38) .drive.-up {
  -webkit-animation-delay: -4356ms;
          animation-delay: -4356ms;
}
.star:nth-child(38) .drive.-scale {
  -webkit-animation-delay: -4356ms;
          animation-delay: -4356ms;
}
.star:nth-child(38) .drive.-rotate, .star:nth-child(38) .drive.-reverse, .star:nth-child(38) .drive.-angle, .star:nth-child(38) .drive.-rubber {
  -webkit-animation-delay: -3380ms;
          animation-delay: -3380ms;
}
.star:nth-child(38) .drive.-radius {
  transform: translateX(260px);
}
.star:nth-child(38) .graphic {
  background: rgba(183, 145, 253, 0.7);
}
.star:nth-child(39) .drive.-up {
  -webkit-animation-delay: -92297ms;
          animation-delay: -92297ms;
}
.star:nth-child(39) .drive.-scale {
  -webkit-animation-delay: -92297ms;
          animation-delay: -92297ms;
}
.star:nth-child(39) .drive.-rotate, .star:nth-child(39) .drive.-reverse, .star:nth-child(39) .drive.-angle, .star:nth-child(39) .drive.-rubber {
  -webkit-animation-delay: -16254ms;
          animation-delay: -16254ms;
}
.star:nth-child(39) .drive.-radius {
  transform: translateX(341px);
}
.star:nth-child(39) .graphic {
  background: rgba(144, 153, 244, 0.7);
}
.star:nth-child(40) .drive.-up {
  -webkit-animation-delay: -40920ms;
          animation-delay: -40920ms;
}
.star:nth-child(40) .drive.-scale {
  -webkit-animation-delay: -40920ms;
          animation-delay: -40920ms;
}
.star:nth-child(40) .drive.-rotate, .star:nth-child(40) .drive.-reverse, .star:nth-child(40) .drive.-angle, .star:nth-child(40) .drive.-rubber {
  -webkit-animation-delay: -47189ms;
          animation-delay: -47189ms;
}
.star:nth-child(40) .drive.-radius {
  transform: translateX(127px);
}
.star:nth-child(40) .graphic {
  background: rgba(168, 150, 243, 0.7);
}
.star:nth-child(41) .drive.-up {
  -webkit-animation-delay: -15072ms;
          animation-delay: -15072ms;
}
.star:nth-child(41) .drive.-scale {
  -webkit-animation-delay: -15072ms;
          animation-delay: -15072ms;
}
.star:nth-child(41) .drive.-rotate, .star:nth-child(41) .drive.-reverse, .star:nth-child(41) .drive.-angle, .star:nth-child(41) .drive.-rubber {
  -webkit-animation-delay: -33281ms;
          animation-delay: -33281ms;
}
.star:nth-child(41) .drive.-radius {
  transform: translateX(163px);
}
.star:nth-child(41) .graphic {
  background: rgba(121, 116, 246, 0.7);
}
.star:nth-child(42) .drive.-up {
  -webkit-animation-delay: -78803ms;
          animation-delay: -78803ms;
}
.star:nth-child(42) .drive.-scale {
  -webkit-animation-delay: -78803ms;
          animation-delay: -78803ms;
}
.star:nth-child(42) .drive.-rotate, .star:nth-child(42) .drive.-reverse, .star:nth-child(42) .drive.-angle, .star:nth-child(42) .drive.-rubber {
  -webkit-animation-delay: -52670ms;
          animation-delay: -52670ms;
}
.star:nth-child(42) .drive.-radius {
  transform: translateX(254px);
}
.star:nth-child(42) .graphic {
  background: rgba(180, 175, 226, 0.7);
}
.star:nth-child(43) .drive.-up {
  -webkit-animation-delay: -72736ms;
          animation-delay: -72736ms;
}
.star:nth-child(43) .drive.-scale {
  -webkit-animation-delay: -72736ms;
          animation-delay: -72736ms;
}
.star:nth-child(43) .drive.-rotate, .star:nth-child(43) .drive.-reverse, .star:nth-child(43) .drive.-angle, .star:nth-child(43) .drive.-rubber {
  -webkit-animation-delay: -93094ms;
          animation-delay: -93094ms;
}
.star:nth-child(43) .drive.-radius {
  transform: translateX(160px);
}
.star:nth-child(43) .graphic {
  background: rgba(183, 201, 254, 0.7);
}
.star:nth-child(44) .drive.-up {
  -webkit-animation-delay: -60659ms;
          animation-delay: -60659ms;
}
.star:nth-child(44) .drive.-scale {
  -webkit-animation-delay: -60659ms;
          animation-delay: -60659ms;
}
.star:nth-child(44) .drive.-rotate, .star:nth-child(44) .drive.-reverse, .star:nth-child(44) .drive.-angle, .star:nth-child(44) .drive.-rubber {
  -webkit-animation-delay: -62935ms;
          animation-delay: -62935ms;
}
.star:nth-child(44) .drive.-radius {
  transform: translateX(328px);
}
.star:nth-child(44) .graphic {
  background: rgba(167, 103, 249, 0.7);
}
.star:nth-child(45) .drive.-up {
  -webkit-animation-delay: -70041ms;
          animation-delay: -70041ms;
}
.star:nth-child(45) .drive.-scale {
  -webkit-animation-delay: -70041ms;
          animation-delay: -70041ms;
}
.star:nth-child(45) .drive.-rotate, .star:nth-child(45) .drive.-reverse, .star:nth-child(45) .drive.-angle, .star:nth-child(45) .drive.-rubber {
  -webkit-animation-delay: -80856ms;
          animation-delay: -80856ms;
}
.star:nth-child(45) .drive.-radius {
  transform: translateX(298px);
}
.star:nth-child(45) .graphic {
  background: rgba(178, 113, 233, 0.7);
}
.star:nth-child(46) .drive.-up {
  -webkit-animation-delay: -97137ms;
          animation-delay: -97137ms;
}
.star:nth-child(46) .drive.-scale {
  -webkit-animation-delay: -97137ms;
          animation-delay: -97137ms;
}
.star:nth-child(46) .drive.-rotate, .star:nth-child(46) .drive.-reverse, .star:nth-child(46) .drive.-angle, .star:nth-child(46) .drive.-rubber {
  -webkit-animation-delay: -27217ms;
          animation-delay: -27217ms;
}
.star:nth-child(46) .drive.-radius {
  transform: translateX(287px);
}
.star:nth-child(46) .graphic {
  background: rgba(241, 238, 250, 0.7);
}
.star:nth-child(47) .drive.-up {
  -webkit-animation-delay: -76257ms;
          animation-delay: -76257ms;
}
.star:nth-child(47) .drive.-scale {
  -webkit-animation-delay: -76257ms;
          animation-delay: -76257ms;
}
.star:nth-child(47) .drive.-rotate, .star:nth-child(47) .drive.-reverse, .star:nth-child(47) .drive.-angle, .star:nth-child(47) .drive.-rubber {
  -webkit-animation-delay: -58721ms;
          animation-delay: -58721ms;
}
.star:nth-child(47) .drive.-radius {
  transform: translateX(298px);
}
.star:nth-child(47) .graphic {
  background: rgba(115, 232, 215, 0.7);
}
.star:nth-child(48) .drive.-up {
  -webkit-animation-delay: -83833ms;
          animation-delay: -83833ms;
}
.star:nth-child(48) .drive.-scale {
  -webkit-animation-delay: -83833ms;
          animation-delay: -83833ms;
}
.star:nth-child(48) .drive.-rotate, .star:nth-child(48) .drive.-reverse, .star:nth-child(48) .drive.-angle, .star:nth-child(48) .drive.-rubber {
  -webkit-animation-delay: -2337ms;
          animation-delay: -2337ms;
}
.star:nth-child(48) .drive.-radius {
  transform: translateX(171px);
}
.star:nth-child(48) .graphic {
  background: rgba(158, 201, 238, 0.7);
}
.star:nth-child(49) .drive.-up {
  -webkit-animation-delay: -10035ms;
          animation-delay: -10035ms;
}
.star:nth-child(49) .drive.-scale {
  -webkit-animation-delay: -10035ms;
          animation-delay: -10035ms;
}
.star:nth-child(49) .drive.-rotate, .star:nth-child(49) .drive.-reverse, .star:nth-child(49) .drive.-angle, .star:nth-child(49) .drive.-rubber {
  -webkit-animation-delay: -42893ms;
          animation-delay: -42893ms;
}
.star:nth-child(49) .drive.-radius {
  transform: translateX(156px);
}
.star:nth-child(49) .graphic {
  background: rgba(160, 227, 220, 0.7);
}
.star:nth-child(50) .drive.-up {
  -webkit-animation-delay: -28439ms;
          animation-delay: -28439ms;
}
.star:nth-child(50) .drive.-scale {
  -webkit-animation-delay: -28439ms;
          animation-delay: -28439ms;
}
.star:nth-child(50) .drive.-rotate, .star:nth-child(50) .drive.-reverse, .star:nth-child(50) .drive.-angle, .star:nth-child(50) .drive.-rubber {
  -webkit-animation-delay: -27710ms;
          animation-delay: -27710ms;
}
.star:nth-child(50) .drive.-radius {
  transform: translateX(295px);
}
.star:nth-child(50) .graphic {
  background: rgba(222, 248, 241, 0.7);
}
.star:nth-child(51) .drive.-up {
  -webkit-animation-delay: -77181ms;
          animation-delay: -77181ms;
}
.star:nth-child(51) .drive.-scale {
  -webkit-animation-delay: -77181ms;
          animation-delay: -77181ms;
}
.star:nth-child(51) .drive.-rotate, .star:nth-child(51) .drive.-reverse, .star:nth-child(51) .drive.-angle, .star:nth-child(51) .drive.-rubber {
  -webkit-animation-delay: -2358ms;
          animation-delay: -2358ms;
}
.star:nth-child(51) .drive.-radius {
  transform: translateX(201px);
}
.star:nth-child(51) .graphic {
  background: rgba(140, 124, 217, 0.7);
}
.star:nth-child(52) .drive.-up {
  -webkit-animation-delay: -84071ms;
          animation-delay: -84071ms;
}
.star:nth-child(52) .drive.-scale {
  -webkit-animation-delay: -84071ms;
          animation-delay: -84071ms;
}
.star:nth-child(52) .drive.-rotate, .star:nth-child(52) .drive.-reverse, .star:nth-child(52) .drive.-angle, .star:nth-child(52) .drive.-rubber {
  -webkit-animation-delay: -94328ms;
          animation-delay: -94328ms;
}
.star:nth-child(52) .drive.-radius {
  transform: translateX(142px);
}
.star:nth-child(52) .graphic {
  background: rgba(117, 204, 245, 0.7);
}
.star:nth-child(53) .drive.-up {
  -webkit-animation-delay: -86855ms;
          animation-delay: -86855ms;
}
.star:nth-child(53) .drive.-scale {
  -webkit-animation-delay: -86855ms;
          animation-delay: -86855ms;
}
.star:nth-child(53) .drive.-rotate, .star:nth-child(53) .drive.-reverse, .star:nth-child(53) .drive.-angle, .star:nth-child(53) .drive.-rubber {
  -webkit-animation-delay: -37724ms;
          animation-delay: -37724ms;
}
.star:nth-child(53) .drive.-radius {
  transform: translateX(233px);
}
.star:nth-child(53) .graphic {
  background: rgba(195, 194, 205, 0.7);
}
.star:nth-child(54) .drive.-up {
  -webkit-animation-delay: -91306ms;
          animation-delay: -91306ms;
}
.star:nth-child(54) .drive.-scale {
  -webkit-animation-delay: -91306ms;
          animation-delay: -91306ms;
}
.star:nth-child(54) .drive.-rotate, .star:nth-child(54) .drive.-reverse, .star:nth-child(54) .drive.-angle, .star:nth-child(54) .drive.-rubber {
  -webkit-animation-delay: -81761ms;
          animation-delay: -81761ms;
}
.star:nth-child(54) .drive.-radius {
  transform: translateX(183px);
}
.star:nth-child(54) .graphic {
  background: rgba(158, 218, 206, 0.7);
}
.star:nth-child(55) .drive.-up {
  -webkit-animation-delay: -92490ms;
          animation-delay: -92490ms;
}
.star:nth-child(55) .drive.-scale {
  -webkit-animation-delay: -92490ms;
          animation-delay: -92490ms;
}
.star:nth-child(55) .drive.-rotate, .star:nth-child(55) .drive.-reverse, .star:nth-child(55) .drive.-angle, .star:nth-child(55) .drive.-rubber {
  -webkit-animation-delay: -58189ms;
          animation-delay: -58189ms;
}
.star:nth-child(55) .drive.-radius {
  transform: translateX(198px);
}
.star:nth-child(55) .graphic {
  background: rgba(212, 248, 239, 0.7);
}
.star:nth-child(56) .drive.-up {
  -webkit-animation-delay: -15715ms;
          animation-delay: -15715ms;
}
.star:nth-child(56) .drive.-scale {
  -webkit-animation-delay: -15715ms;
          animation-delay: -15715ms;
}
.star:nth-child(56) .drive.-rotate, .star:nth-child(56) .drive.-reverse, .star:nth-child(56) .drive.-angle, .star:nth-child(56) .drive.-rubber {
  -webkit-animation-delay: -15874ms;
          animation-delay: -15874ms;
}
.star:nth-child(56) .drive.-radius {
  transform: translateX(302px);
}
.star:nth-child(56) .graphic {
  background: rgba(109, 134, 238, 0.7);
}
.star:nth-child(57) .drive.-up {
  -webkit-animation-delay: -87398ms;
          animation-delay: -87398ms;
}
.star:nth-child(57) .drive.-scale {
  -webkit-animation-delay: -87398ms;
          animation-delay: -87398ms;
}
.star:nth-child(57) .drive.-rotate, .star:nth-child(57) .drive.-reverse, .star:nth-child(57) .drive.-angle, .star:nth-child(57) .drive.-rubber {
  -webkit-animation-delay: -13107ms;
          animation-delay: -13107ms;
}
.star:nth-child(57) .drive.-radius {
  transform: translateX(203px);
}
.star:nth-child(57) .graphic {
  background: rgba(193, 138, 201, 0.7);
}
.star:nth-child(58) .drive.-up {
  -webkit-animation-delay: -62860ms;
          animation-delay: -62860ms;
}
.star:nth-child(58) .drive.-scale {
  -webkit-animation-delay: -62860ms;
          animation-delay: -62860ms;
}
.star:nth-child(58) .drive.-rotate, .star:nth-child(58) .drive.-reverse, .star:nth-child(58) .drive.-angle, .star:nth-child(58) .drive.-rubber {
  -webkit-animation-delay: -96175ms;
          animation-delay: -96175ms;
}
.star:nth-child(58) .drive.-radius {
  transform: translateX(230px);
}
.star:nth-child(58) .graphic {
  background: rgba(144, 202, 241, 0.7);
}
.star:nth-child(59) .drive.-up {
  -webkit-animation-delay: -464ms;
          animation-delay: -464ms;
}
.star:nth-child(59) .drive.-scale {
  -webkit-animation-delay: -464ms;
          animation-delay: -464ms;
}
.star:nth-child(59) .drive.-rotate, .star:nth-child(59) .drive.-reverse, .star:nth-child(59) .drive.-angle, .star:nth-child(59) .drive.-rubber {
  -webkit-animation-delay: -51589ms;
          animation-delay: -51589ms;
}
.star:nth-child(59) .drive.-radius {
  transform: translateX(228px);
}
.star:nth-child(59) .graphic {
  background: rgba(180, 187, 236, 0.7);
}
.star:nth-child(60) .drive.-up {
  -webkit-animation-delay: -57917ms;
          animation-delay: -57917ms;
}
.star:nth-child(60) .drive.-scale {
  -webkit-animation-delay: -57917ms;
          animation-delay: -57917ms;
}
.star:nth-child.........完整代码请登录后点击上方下载按钮下载查看