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