div+css实现多彩粒子风暴效果代码

代码语言: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(60) .drive.-rotate, .star:nth-child(60) .drive.-reverse, .star:nth-child(60) .drive.-angle, .star:nth-child(60) .drive.-rubber {
  -webkit-animation-delay: -18074ms;
          animation-delay: -18074ms;
}
.star:nth-child(60) .drive.-radius {
  transform: translateX(291px);
}
.star:nth-child(60) .graphic {
  background: rgba(175, 157, 213, 0.7);
}
.star:nth-child(61) .drive.-up {
  -webkit-animation-delay: -71120ms;
          animation-delay: -71120ms;
}
.star:nth-child(61) .drive.-scale {
  -webkit-animation-delay: -71120ms;
          animation-delay: -71120ms;
}
.star:nth-child(61) .drive.-rotate, .star:nth-child(61) .drive.-reverse, .star:nth-child(61) .drive.-angle, .star:nth-child(61) .drive.-rubber {
  -webkit-animation-delay: -59093ms;
          animation-delay: -59093ms;
}
.star:nth-child(61) .drive.-radius {
  transform: translateX(153px);
}
.star:nth-child(61) .graphic {
  background: rgba(108, 215, 217, 0.7);
}
.star:nth-child(62) .drive.-up {
  -webkit-animation-delay: -58116ms;
          animation-delay: -58116ms;
}
.star:nth-child(62) .drive.-scale {
  -webkit-animation-delay: -58116ms;
          animation-delay: -58116ms;
}
.star:nth-child(62) .drive.-rotate, .star:nth-child(62) .drive.-reverse, .star:nth-child(62) .drive.-angle, .star:nth-child(62) .drive.-rubber {
  -webkit-animation-delay: -20275ms;
          animation-delay: -20275ms;
}
.star:nth-child(62) .drive.-radius {
  transform: translateX(196px);
}
.star:nth-child(62) .graphic {
  background: rgba(169, 114, 222, 0.7);
}
.star:nth-child(63) .drive.-up {
  -webkit-animation-delay: -38185ms;
          animation-delay: -38185ms;
}
.star:nth-child(63) .drive.-scale {
  -webkit-animation-delay: -38185ms;
          animation-delay: -38185ms;
}
.star:nth-child(63) .drive.-rotate, .star:nth-child(63) .drive.-reverse, .star:nth-child(63) .drive.-angle, .star:nth-child(63) .drive.-rubber {
  -webkit-animation-delay: -72692ms;
          animation-delay: -72692ms;
}
.star:nth-child(63) .drive.-radius {
  transform: translateX(125px);
}
.star:nth-child(63) .graphic {
  background: rgba(143, 204, 214, 0.7);
}
.star:nth-child(64) .drive.-up {
  -webkit-animation-delay: -35687ms;
          animation-delay: -35687ms;
}
.star:nth-child(64) .drive.-scale {
  -webkit-animation-delay: -35687ms;
          animation-delay: -35687ms;
}
.star:nth-child(64) .drive.-rotate, .star:nth-child(64) .drive.-reverse, .star:nth-child(64) .drive.-angle, .star:nth-child(64) .drive.-rubber {
  -webkit-animation-delay: -43257ms;
          animation-delay: -43257ms;
}
.star:nth-child(64) .drive.-radius {
  transform: translateX(328px);
}
.star:nth-child(64) .graphic {
  background: rgba(164, 191, 247, 0.7);
}
.star:nth-child(65) .drive.-up {
  -webkit-animation-delay: -60954ms;
          animation-delay: -60954ms;
}
.star:nth-child(65) .drive.-scale {
  -webkit-animation-delay: -60954ms;
          animation-delay: -60954ms;
}
.star:nth-child(65) .drive.-rotate, .star:nth-child(65) .drive.-reverse, .star:nth-child(65) .drive.-angle, .star:nth-child(65) .drive.-rubber {
  -webkit-animation-delay: -54918ms;
          animation-delay: -54918ms;
}
.star:nth-child(65) .drive.-radius {
  transform: translateX(253px);
}
.star:nth-child(65) .graphic {
  background: rgba(193, 104, 207, 0.7);
}
.star:nth-child(66) .drive.-up {
  -webkit-animation-delay: -72171ms;
          animation-delay: -72171ms;
}
.star:nth-child(66) .drive.-scale {
  -webkit-animation-delay: -72171ms;
          animation-delay: -72171ms;
}
.star:nth-child(66) .drive.-rotate, .star:nth-child(66) .drive.-reverse, .star:nth-child(66) .drive.-angle, .star:nth-child(66) .drive.-rubber {
  -webkit-animation-delay: -62081ms;
          animation-delay: -62081ms;
}
.star:nth-child(66) .drive.-radius {
  transform: translateX(337px);
}
.star:nth-child(66) .graphic {
  background: rgba(210, 117, 252, 0.7);
}
.star:nth-child(67) .drive.-up {
  -webkit-animation-delay: -21694ms;
          animation-delay: -21694ms;
}
.star:nth-child(67) .drive.-scale {
  -webkit-animation-delay: -21694ms;
          animation-delay: -21694ms;
}
.star:nth-child(67) .drive.-rotate, .star:nth-child(67) .drive.-reverse, .star:nth-child(67) .drive.-angle, .star:nth-child(67) .drive.-rubber {
  -webkit-animation-delay: -19634ms;
          animation-delay: -19634ms;
}
.star:nth-child(67) .drive.-radius {
  transform: translateX(234px);
}
.star:nth-child(67) .graphic {
  background: rgba(165, 110, 207, 0.7);
}
.star:nth-child(68) .drive.-up {
  -webkit-animation-delay: -25769ms;
          animation-delay: -25769ms;
}
.star:nth-child(68) .drive.-scale {
  -webkit-animation-delay: -25769ms;
          animation-delay: -25769ms;
}
.star:nth-child(68) .drive.-rotate, .star:nth-child(68) .drive.-reverse, .star:nth-child(68) .drive.-angle, .star:nth-child(68) .drive.-rubber {
  -webkit-animation-delay: -61217ms;
          animation-delay: -61217ms;
}
.star:nth-child(68) .drive.-radius {
  transform: translateX(164px);
}
.star:nth-child(68) .graphic {
  background: rgba(159, 130, 212, 0.7);
}
.star:nth-child(69) .drive.-up {
  -webkit-animation-delay: -1030ms;
          animation-delay: -1030ms;
}
.star:nth-child(69) .drive.-scale {
  -webkit-animation-delay: -1030ms;
          animation-delay: -1030ms;
}
.star:nth-child(69) .drive.-rotate, .star:nth-child(69) .drive.-reverse, .star:nth-child(69) .drive.-angle, .star:nth-child(69) .drive.-rubber {
  -webkit-animation-delay: -91092ms;
          animation-delay: -91092ms;
}
.star:nth-child(69) .drive.-radius {
  transform: translateX(288px);
}
.star:nth-child(69) .graphic {
  background: rgba(151, 105, 206, 0.7);
}
.star:nth-child(70) .drive.-up {
  -webkit-animation-delay: -75644ms;
          animation-delay: -75644ms;
}
.star:nth-child(70) .drive.-scale {
  -webkit-animation-delay: -75644ms;
          animation-delay: -75644ms;
}
.star:nth-child(70) .drive.-rotate, .star:nth-child(70) .drive.-reverse, .star:nth-child(70) .drive.-angle, .star:nth-child(70) .drive.-rubber {
  -webkit-animation-delay: -82831ms;
          animation-delay: -82831ms;
}
.star:nth-child(70) .drive.-radius {
  transform: translateX(256px);
}
.star:nth-child(70) .graphic {
  background: rgba(179, 220, 225, 0.7);
}
.star:nth-child(71) .drive.-up {
  -webkit-animation-delay: -57758ms;
          animation-delay: -57758ms;
}
.star:nth-child(71) .drive.-scale {
  -webkit-animation-delay: -57758ms;
          animation-delay: -57758ms;
}
.star:nth-child(71) .drive.-rotate, .star:nth-child(71) .drive.-reverse, .star:nth-child(71) .drive.-angle, .star:nth-child(71) .drive.-rubber {
  -webkit-animation-delay: -8315ms;
          animation-delay: -8315ms;
}
.star:nth-child(71) .drive.-radius {
  transform: translateX(186px);
}
.star:nth-child(71) .graphic {
  background: rgba(114, 117, 220, 0.7);
}
.star:nth-child(72) .drive.-up {
  -webkit-animation-delay: -91946ms;
          animation-delay: -91946ms;
}
.star:nth-child(72) .drive.-scale {
  -webkit-animation-delay: -91946ms;
          animation-delay: -91946ms;
}
.star:nth-child(72) .drive.-rotate, .star:nth-child(72) .drive.-reverse, .star:nth-child(72) .drive.-angle, .star:nth-child(72) .drive.-rubber {
  -webkit-animation-delay: -87395ms;
          animation-delay: -87395ms;
}
.star:nth-child(72) .drive.-radius {
  transform: translateX(333px);
}
.star:nth-child(72) .graphic {
  background: rgba(112, 223, 225, 0.7);
}
.star:nth-child(73) .drive.-up {
  -webkit-animation-delay: -89317ms;
          animation-delay: -89317ms;
}
.star:nth-child(73) .drive.-scale {
  -webkit-animation-delay: -89317ms;
          animation-delay: -89317ms;
}
.star:nth-child(73) .drive.-rotate, .star:nth-child(73) .drive.-reverse, .star:nth-child(73) .drive.-angle, .star:nth-child(73) .drive.-rubber {
  -webkit-animation-delay: -16343ms;
          animation-delay: -16343ms;
}
.star:nth-child(73) .drive.-radius {
  transform: translateX(248px);
}
.star:nth-child(73) .graphic {
  background: rgba(103, 127, 221, 0.7);
}
.star:nth-child(74) .drive.-up {
  -webkit-animation-delay: -33852ms;
          animation-delay: -33852ms;
}
.star:nth-child(74) .drive.-scale {
  -webkit-animation-delay: -33852ms;
          animation-delay: -33852ms;
}
.star:nth-child(74) .drive.-rotate, .star:nth-child(74) .drive.-reverse, .star:nth-child(74) .drive.-angle, .star:nth-child(74) .drive.-rubber {
  -webkit-animation-delay: -12095ms;
          animation-delay: -12095ms;
}
.star:nth-child(74) .drive.-radius {
  transform: translateX(338px);
}
.star:nth-child(74) .graphic {
  background: rgba(194, 247, 202, 0.7);
}
.star:nth-child(75) .drive.-up {
  -webkit-animation-delay: -56567ms;
          animation-delay: -56567ms;
}
.star:nth-child(75) .drive.-scale {
  -webkit-animation-delay: -56567ms;
          animation-delay: -56567ms;
}
.star:nth-child(75) .drive.-rotate, .star:nth-child(75) .drive.-reverse, .star:nth-child(75) .drive.-angle, .star:nth-child(75) .drive.-rubber {
  -webkit-animation-delay: -44855ms;
          animation-delay: -44855ms;
}
.star:nth-child(75) .drive.-radius {
  transform: translateX(261px);
}
.star:nth-child(75) .graphic {
  background: rgba(245, 126, 248, 0.7);
}
.star:nth-child(76) .drive.-up {
  -webkit-animation-delay: -85121ms;
          animation-delay: -85121ms;
}
.star:nth-child(76) .drive.-scale {
  -webkit-animation-delay: -85121ms;
          animation-delay: -85121ms;
}
.star:nth-child(76) .drive.-rotate, .star:nth-child(76) .drive.-reverse, .star:nth-child(76) .drive.-angle, .star:nth-child(76) .drive.-rubber {
  -webkit-animation-delay: -10092ms;
          animation-delay: -10092ms;
}
.star:nth-child(76) .drive.-radius {
  transform: translateX(328px);
}
.star:nth-child(76) .graphic {
  background: rgba(148, 141, 212, 0.7);
}
.star:nth-child(77) .drive.-up {
  -webkit-animation-delay: -90861ms;
          animation-delay: -90861ms;
}
.star:nth-child(77) .drive.-scale {
  -webkit-animation-delay: -90861ms;
          animation-delay: -90861ms;
}
.star:nth-child(77) .drive.-rotate, .star:nth-child(77) .drive.-reverse, .star:nth-child(77) .drive.-angle, .star:nth-child(77) .drive.-rubber {
  -webkit-animation-delay: -83814ms;
          animation-delay: -83814ms;
}
.star:nth-child(77) .drive.-radius {
  transform: translateX(305px);
}
.star:nth-child(77) .graphic {
  background: rgba(212, 249, 220, 0.7);
}
.star:nth-child(78) .drive.-up {
  -webkit-animation-delay: -68031ms;
          animation-delay: -68031ms;
}
.star:nth-child(78) .drive.-scale {
  -webkit-animation-delay: -68031ms;
          animation-delay: -68031ms;
}
.star:nth-child(78) .drive.-rotate, .star:nth-child(78) .drive.-reverse, .star:nth-child(78) .drive.-angle, .star:nth-child(78) .drive.-rubber {
  -webkit-animation-delay: -711ms;
          animation-delay: -711ms;
}
.star:nth-child(78) .drive.-radius {
  transform: translateX(120px);
}
.star:nth-child(78) .graphic {
  background: rgba(114, 202, 248, 0.7);
}
.star:nth-child(79) .drive.-up {
  -webkit-animation-delay: -54466ms;
          animation-delay: -54466ms;
}
.star:nth-child(79) .drive.-scale {
  -webkit-animation-delay: -54466ms;
          animation-delay: -54466ms;
}
.star:nth-child(79) .drive.-rotate, .star:nth-child(79) .drive.-reverse, .star:nth-child(79) .drive.-angle, .star:nth-child(79) .drive.-rubber {
  -webkit-animation-delay: -79708ms;
          animation-delay: -79708ms;
}
.star:nth-child(79) .drive.-radius {
  transform: translateX(238px);
}
.star:nth-child(79) .graphic {
  background: rgba(250, 160, 215, 0.7);
}
.star:nth-child(80) .drive.-up {
  -webkit-animation-delay: -56191ms;
          animation-delay: -56191ms;
}
.star:nth-child(80) .drive.-scale {
  -webkit-animation-delay: -56191ms;
          animation-delay: -56191ms;
}
.star:nth-child(80) .drive.-rotate, .star:nth-child(80) .drive.-reverse, .star:nth-child(80) .drive.-angle, .star:nth-child(80) .drive.-rubber {
  -webkit-animation-delay: -99556ms;
          animation-delay: -99556ms;
}
.star:nth-child(80) .drive.-radius {
  transform: translateX(117px);
}
.star:nth-child(80) .graphic {
  background: rgba(223, 102, 254, 0.7);
}
.star:nth-child(81) .drive.-up {
  -webkit-animation-delay: -79593ms;
          animation-delay: -79593ms;
}
.star:nth-child(81) .drive.-scale {
  -webkit-animation-delay: -79593ms;
          animation-delay: -79593ms;
}
.star:nth-child(81) .drive.-rotate, .star:nth-child(81) .drive.-reverse, .star:nth-child(81) .drive.-angle, .star:nth-child(81) .drive.-rubber {
  -webkit-animation-delay: -10781ms;
          animation-delay: -10781ms;
}
.star:nth-child(81) .drive.-radius {
  transform: translateX(341px);
}
.star:nth-child(81) .graphic {
  background: rgba(168, 212, 235, 0.7);
}
.star:nth-child(82) .drive.-up {
  -webkit-animation-delay: -91225ms;
          animation-delay: -91225ms;
}
.star:nth-child(82) .drive.-scale {
  -webkit-animation-delay: -91225ms;
          animation-delay: -91225ms;
}
.star:nth-child(82) .drive.-rotate, .star:nth-child(82) .drive.-reverse, .star:nth-child(82) .drive.-angle, .star:nth-child(82) .drive.-rubber {
  -webkit-animation-delay: -20614ms;
          animation-delay: -20614ms;
}
.star:nth-child(82) .drive.-radius {
  transform: translateX(180px);
}
.star:nth-child(82) .graphic {
  background: rgba(222, 168, 231, 0.7);
}
.star:nth-child(83) .drive.-up {
  -webkit-animation-delay: -39837ms;
          animation-delay: -39837ms;
}
.star:nth-child(83) .drive.-scale {
  -webkit-animation-delay: -39837ms;
          animation-delay: -39837ms;
}
.star:nth-child(83) .drive.-rotate, .star:nth-child(83) .drive.-reverse, .star:nth-child(83) .drive.-angle, .star:nth-child(83) .drive.-rubber {
  -webkit-animation-delay: -32528ms;
          animation-delay: -32528ms;
}
.star:nth-child(83) .drive.-radius {
  transform: translateX(122px);
}
.star:nth-child(83) .graphic {
  background: rgba(127, 226, 218, 0.7);
}
.star:nth-child(84) .drive.-up {
  -webkit-animation-delay: -77308ms;
          animation-delay: -77308ms;
}
.star:nth-child(84) .drive.-scale {
  -webkit-animation-delay: -77308ms;
          animation-delay: -77308ms;
}
.star:nth-child(84) .drive.-rotate, .star:nth-child(84) .drive.-reverse, .star:nth-child(84) .drive.-angle, .star:nth-child(84) .drive.-rubber {
  -webkit-animation-delay: -68140ms;
          animation-delay: -68140ms;
}
.star:nth-child(84) .drive.-radius {
  transform: translateX(279px);
}
.star:nth-child(84) .graphic {
  background: rgba(105, 219, 255, 0.7);
}
.star:nth-child(85) .drive.-up {
  -webkit-animation-delay: -77889ms;
          animation-delay: -77889ms;
}
.star:nth-child(85) .drive.-scale {
  -webkit-animation-delay: -77889ms;
          animation-delay: -77889ms;
}
.star:nth-child(85) .drive.-rotate, .star:nth-child(85) .drive.-reverse, .star:nth-child(85) .drive.-angle, .star:nth-child(85) .drive.-rubber {
  -webkit-animation-delay: -17963ms;
          animation-delay: -17963ms;
}
.star:nth-child(85) .drive.-radius {
  transform: translateX(202px);
}
.star:nth-child(85) .graphic {
  background: rgba(138, 128, 245, 0.7);
}
.star:nth-child(86) .drive.-up {
  -webkit-animation-delay: -36678ms;
          animation-delay: -36678ms;
}
.star:nth-child(86) .drive.-scale {
  -webkit-animation-delay: -36678ms;
          animation-delay: -36678ms;
}
.star:nth-child(86) .drive.-rotate, .star:nth-child(86) .drive.-reverse, .star:nth-child(86) .drive.-angle, .star:nth-child(86) .drive.-rubber {
  -webkit-animation-delay: -54911ms;
          animation-delay: -54911ms;
}
.star:nth-child(86) .drive.-radius {
  transform: translateX(329px);
}
.star:nth-child(86) .graphic {
  background: rgba(104, 162, 230, 0.7);
}
.star:nth-child(87) .drive.-up {
  -webkit-animation-delay: -57646ms;
          animation-delay: -57646ms;
}
.star:nth-child(87) .drive.-scale {
  -webkit-animation-delay: -57646ms;
          animation-delay: -57646ms;
}
.star:nth-child(87) .drive.-rotate, .star:nth-child(87) .drive.-reverse, .star:nth-child(87) .drive.-angle, .star:nth-child(87) .drive.-rubber {
  -webkit-animation-delay: -56835ms;
          animation-delay: -56835ms;
}
.star:nth-child(87) .drive.-radius {
  transform: translateX(174px);
}
.star:nth-child(87) .graphic {
  background: rgba(125, 101, 220, 0.7);
}
.star:nth-child(88) .drive.-up {
  -webkit-animation-delay: -13054ms;
          animation-delay: -13054ms;
}
.star:nth-child(88) .drive.-scale {
  -webkit-animation-delay: -13054ms;
          animation-delay: -13054ms;
}
.star:nth-child(88) .drive.-rotate, .star:nth-child(88) .drive.-reverse, .star:nth-child(88) .drive.-angle, .star:nth-child(88) .drive.-rubber {
  -webkit-animation-delay: -10884ms;
          animation-delay: -10884ms;
}
.star:nth-child(88) .drive.-radius {
  transform: translateX(133px);
}
.star:nth-child(88) .graphic {
  background: rgba(202, 105, 226, 0.7);
}
.star:nth-child(89) .drive.-up {
  -webkit-animation-delay: -54392ms;
          animation-delay: -54392ms;
}
.star:nth-child(89) .drive.-scale {
  -webkit-animation-delay: -54392ms;
          animation-delay: -54392ms;
}
.star:nth-child(89) .drive.-rotate, .star:nth-child(89) .drive.-reverse, .star:nth-child(89) .drive.-angle, .star:nth-child(89) .drive.-rubber {
  -webkit-animation-delay: -87540ms;
          animation-delay: -87540ms;
}
.star:nth-child(89) .drive.-radius {
  transform: translateX(196px);
}
.star:nth-child(89) .graphic {
  background: rgba(137, 139, 211, 0.7);
}
.star:nth-child(90) .drive.-up {
  -webkit-animation-delay: -56216ms;
          animation-delay: -56216ms;
}
.star:nth-child(90) .drive.-scale {
  -webkit-animation-delay: -56216ms;
          animation-delay: -56216ms;
}
.star:nth-child(90) .drive.-rotate, .star:nth-child(90) .drive.-reverse, .star:nth-child(90) .drive.-angle, .star:nth-child(90) .drive.-rubber {
  -webkit-animation-delay: -23840ms;
          animation-delay: -23840ms;
}
.star:nth-child(90) .drive.-radius {
  transform: translateX(140px);
}
.star:nth-child(90) .graphic {
  background: rgba(220, 219, 248, 0.7);
}
.star:nth-child(91) .drive.-up {
  -webkit-animation-delay: -28911ms;
          animation-delay: -28911ms;
}
.star:nth-child(91) .drive.-scale {
  -webkit-animation-delay: -28911ms;
          animation-delay: -28911ms;
}
.star:nth-child(91) .drive.-rotate, .star:nth-child(91) .drive.-reverse, .star:nth-child(91) .drive.-angle, .star:nth-child(91) .drive.-rubber {
  -webkit-animation-delay: -9750ms;
          animation-delay: -9750ms;
}
.star:nth-child(91) .drive.-radius {
  transform: translateX(329px);
}
.star:nth-child(91) .graphic {
  background: rgba(253, 108, 213, 0.7);
}
.star:nth-child(92) .drive.-up {
  -webkit-animation-delay: -17193ms;
          animation-delay: -17193ms;
}
.star:nth-child(92) .drive.-scale {
  -webkit-animation-delay: -17193ms;
          animation-delay: -17193ms;
}
.star:nth-child(92) .drive.-rotate, .star:nth-child(92) .drive.-reverse, .star:nth-child(92) .drive.-angle, .star:nth-child(92) .drive.-rubber {
  -webkit-animation-delay: -58407ms;
          animation-delay: -58407ms;
}
.star:nth-child(92) .drive.-radius {
  transform: translateX(267px);
}
.star:nth-child(92) .graphic {
  background: rgba(211, 181, 254, 0.7);
}
.star:nth-child(93) .drive.-up {
  -webkit-animation-delay: -24613ms;
          animation-delay: -24613ms;
}
.star:nth-child(93) .drive.-scale {
  -webkit-animation-delay: -24613ms;
          animation-delay: -24613ms;
}
.star:nth-child(93) .drive.-rotate, .star:nth-child(93) .drive.-reverse, .star:nth-child(93) .drive.-angle, .star:nth-child(93) .drive.-rubber {
  -webkit-animation-delay: -3546ms;
          animation-delay: -3546ms;
}
.star:nth-child(93) .drive.-radius {
  transform: translateX(347px);
}
.star:nth-child(93) .graphic {
  background: rgba(217, 184, 217, 0.7);
}
.star:nth-child(94) .drive.-up {
  -webkit-animation-delay: -41968ms;
          animation-delay: -41968ms;
}
.star:nth-child(94) .drive.-scale {
  -webkit-animation-delay: -41968ms;
          animation-delay: -41968ms;
}
.star:nth-child(94) .drive.-rotate, .star:nth-child(94) .drive.-reverse, .star:nth-child(94) .drive.-angle, .star:nth-child(94) .drive.-rubber {
  -webkit-animation-delay: -93332ms;
          animation-delay: -93332ms;
}
.star:nth-child(94) .drive.-radius {
  transform: translateX(173px);
}
.star:nth-child(94) .graphic {
  background: rgba(115, 221, 213, 0.7);
}
.star:nth-child(95) .drive.-up {
  -webkit-animation-delay: -21140ms;
          animation-delay: -21140ms;
}
.star:nth-child(95) .drive.-scale {
  -webkit-animation-delay: -21140ms;
          animation-delay: -21140ms;
}
.star:nth-child(95) .drive.-rotate, .star:nth-child(95) .drive.-reverse, .star:nth-child(95) .drive.-angle, .star:nth-child(95) .drive.-rubber {
  -webkit-animation-delay: -65169ms;
          animation-delay: -65169ms;
}
.star:nth-child(95) .drive.-radius {
  transform: translateX(317px);
}
.star:nth-child(95) .graphic {
  background: rgba(138, 200, 208, 0.7);
}
.star:nth-child(96) .drive.-up {
  -webkit-animation-delay: -62870ms;
          animation-delay: -62870ms;
}
.star:nth-child(96) .drive.-scale {
  -webkit-animation-delay: -62870ms;
          animation-delay: -62870ms;
}
.star:nth-child(96) .drive.-rotate, .star:nth-child(96) .drive.-reverse, .star:nth-child(96) .drive.-angle, .star:nth-child(96) .drive.-rubber {
  -webkit-animation-delay: -33194ms;
          animation-delay: -33194ms;
}
.star:nth-child(96) .drive.-radius {
  transform: translateX(327px);
}
.star:nth-child(96) .graphic {
  background: rgba(101, 194, 223, 0.7);
}
.star:nth-child(97) .drive.-up {
  -webkit-animation-delay: -20575ms;
          animation-delay: -20575ms;
}
.star:nth-child(97) .drive.-scale {
  -webkit-animation-delay: -20575ms;
          animation-delay: -20575ms;
}
.star:nth-child(97) .drive.-rotate, .star:nth-child(97) .drive.-reverse, .star:nth-child(97) .drive.-angle, .star:nth-child(97) .drive.-rubber {
  -webkit-animation-delay: -85180ms;
          animation-delay: -85180ms;
}
.star:nth-child(97) .drive.-radius {
  transform: translateX(267px);
}
.star:nth-child(97) .graphic {
  background: rgba(155, 193, 208, 0.7);
}
.star:nth-child(98) .drive.-up {
  -webkit-animation-delay: -46740ms;
          animation-delay: -46740ms;
}
.star:nth-child(98) .drive.-scale {
  -webkit-animation-delay: -46740ms;
          animation-delay: -46740ms;
}
.star:nth-child(98) .drive.-rotate, .star:nth-child(98) .drive.-reverse, .star:nth-child(98) .drive.-angle, .star:nth-child(98) .drive.-rubber {
  -webkit-animation-delay: -59209ms;
          animation-delay: -59209ms;
}
.star:nth-child(98) .drive.-radius {
  transform: translateX(130px);
}
.star:nth-child(98) .graphic {
  background: rgba(188, 193, 234, 0.7);
}
.star:nth-child(99) .drive.-up {
  -webkit-animation-delay: -8941ms;
          animation-delay: -8941ms;
}
.star:nth-child(99) .drive.-scale {
  -webkit-animation-delay: -8941ms;
          animation-delay: -8941ms;
}
.star:nth-child(99) .drive.-rotate, .star:nth-child(99) .drive.-reverse, .star:nth-child(99) .drive.-angle, .star:nth-child(99) .drive.-rubber {
  -webkit-animation-delay: -1722ms;
          animation-delay: -1722ms;
}
.star:nth-child(99) .drive.-radius {
  transform: translateX(212px);
}
.star:nth-child(99) .graphic {
  background: rgba(250, 166, 219, 0.7);
}
.star:nth-child(100) .drive.-up {
  -webkit-animation-delay: -10827ms;
          animation-delay: -10827ms;
}
.star:nth-child(100) .drive.-scale {
  -webkit-animation-delay: -10827ms;
          animation-delay: -10827ms;
}
.star:nth.........完整代码请登录后点击上方下载按钮下载查看

网友评论0