div+css实现星光粒子闪耀动画效果代码
代码语言：html
所属分类：粒子
代码描述：div+css实现星光粒子闪耀动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
height: 100vh;
overflow: hidden;
display: flex;
perspective: 500px;
}
div {
position: absolute;
transform-style: preserve-3d;
}
.sky,
.stars {
width: 100%;
height: 100%;
}
.stars {
-webkit-animation: rotate 60000ms linear infinite;
animation: rotate 60000ms linear infinite;
transform-origin: 50% 50% -250px;
}
.counter {
animation: rotate 60000ms linear infinite reverse;
}
.star {
width: 6px;
height: 6px;
}
.star .light {
width: 100px;
height: 6px;
left: -47px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
}
.star .light:nth-child(1) {
transform: rotate(150deg);
}
.star .light:nth-child(2) {
transform: rotate(210deg);
}
.star .light:nth-child(3) {
transform: rotate(270deg);
}
.star .light:nth-child(4) {
transform: rotate(330deg);
}
.star:nth-child(1) {
top: calc(50%);
left: calc(50%);
transform: translate(33.5px, -194px) translateZ(-131px);
}
.star:nth-child(1) .slide {
-webkit-animation: fade 5000ms -33752ms linear infinite, slide 5000ms -33752ms linear infinite;
animation: fade 5000ms -33752ms linear infinite, slide 5000ms -33752ms linear infinite;
}
.star:nth-child(2) {
top: calc(50%);
left: calc(50%);
transform: translate(48.5px, -209.5px) translateZ(-320px);
}
.star:nth-child(2) .slide {
-webkit-animation: fade 5000ms -19697ms linear infinite, slide 5000ms -19697ms linear infinite;
animation: fade 5000ms -19697ms linear infinite, slide 5000ms -19697ms linear infinite;
}
.star:nth-child(3) {
top: calc(50%);
left: calc(50%);
transform: translate(-169px, 89.5px) translateZ(-284px);
}
.star:nth-child(3) .slide {
-webkit-animation: fade 5000ms -20635ms linear infinite, slide 5000ms -20635ms linear infinite;
animation: fade 5000ms -20635ms linear infinite, slide 5000ms -20635ms linear infinite;
}
.star:nth-child(4) {
top: calc(50%);
left: calc(50%);
transform: translate(-138px, 56.5px) translateZ(-81px);
}
.star:nth-child(4) .slide {
-webkit-animation: fade 5000ms -36763ms linear infinite, slide 5000ms -36763ms linear infinite;
animation: fade 5000ms -36763ms linear infinite, slide 5000ms -36763ms linear infinite;
}
.star:nth-child(5) {
top: calc(50%);
left: calc(50%);
transform: translate(-29.5px, -8.5px) translateZ(-83px);
}
.star:nth-child(5) .slide {
-webkit-animation: fade 5000ms -4875ms linear infinite, slide 5000ms -4875ms linear infinite;
animation: fade 5000ms -4875ms linear infinite, slide 5000ms -4875ms linear infinite;
}
.star:nth-child(6) {
top: calc(50%);
left: calc(50%);
transform: translate(-87px, -92px) translateZ(-421px);
}
.star:nth-child(6) .slide {
-webkit-animation: fade 5000ms -37686ms linear infinite, slide 5000ms -37686ms linear infinite;
animation: fade 5000ms -37686ms linear infinite, slide 5000ms -37686ms linear infinite;
}
.star:nth-child(7) {
top: calc(50%);
left: calc(50%);
transform: translate(-216.5px, -218.5px) translateZ(-220px);
}
.star:nth-child(7) .slide {
-webkit-animation: fade 5000ms -6421ms linear infinite, slide 5000ms -6421ms linear infinite;
animation: fade 5000ms -6421ms linear infinite, slide 5000ms -6421ms linear infinite;
}
.star:nth-child(8) {
top: calc(50%);
left: calc(50%);
transform: translate(-110px, 212.5px) translateZ(-197px);
}
.star:nth-child(8) .slide {
-webkit-animation: fade 5000ms -33122ms linear infinite, slide 5000ms -33122ms linear infinite;
animation: fade 5000ms -33122ms linear infinite, slide 5000ms -33122ms linear infinite;
}
.star:nth-child(9) {
top: calc(50%);
left: calc(50%);
transform: translate(44px, -123px) translateZ(-441px);
}
.star:nth-child(9) .slide {
-webkit-animation: fade 5000ms -31747ms linear infinite, slide 5000ms -31747ms linear infinite;
animation: fade 5000ms -31747ms linear infinite, slide 5000ms -31747ms linear infinite;
}
.star:nth-child(10) {
top: calc(50%);
left: calc(50%);
transform: translate(132px, -28.5px) translateZ(-250px);
}
.star:nth-child(10) .slide {
-webkit-animation: fade 5000ms -22418ms linear infinite, slide 5000ms -22418ms linear infinite;
animation: fade 5000ms -22418ms linear infinite, slide 5000ms -22418ms linear infinite;
}
.star:nth-child(11) {
top: calc(50%);
left: calc(50%);
transform: translate(156px, -21px) translateZ(-62px);
}
.star:nth-child(11) .slide {
-webkit-animation: fade 5000ms -19165ms linear infinite, slide 5000ms -19165ms linear infinite;
animation: fade 5000ms -19165ms linear infinite, slide 5000ms -19165ms linear infinite;
}
.star:nth-child(12) {
top: calc(50%);
left: calc(50%);
transform: translate(-23.5px, 101.5px) translateZ(-2px);
}
.star:nth-child(12) .slide {
-webkit-animation: fade 5000ms -21212ms linear infinite, slide 5000ms -21212ms linear infinite;
animation: fade 5000ms -21212ms linear infinite, slide 5000ms -21212ms linear infinite;
}
.star:nth-child(13) {
top: calc(50%);
left: calc(50%);
transform: translate(194.5px, 4px) translateZ(-80px);
}
.star:nth-child(13) .slide {
-webkit-animation: fade 5000ms -2064ms linear infinite, slide 5000ms -2064ms linear infinite;
animation: fade 5000ms -2064ms linear infinite, slide 5000ms -2064ms linear infinite;
}
.star:nth-child(14) {
top: calc(50%);
left: calc(50%);
transform: translate(-115.5px, 111px) translateZ(-414px);
}
.star:nth-child(14) .slide {
-webkit-animation: fade 5000ms -18539ms linear infinite, slide 5000ms -18539ms linear infinite;
animation: fade 5000ms -18539ms linear infinite, slide 5000ms -18539ms linear infinite;
}
.star:nth-child(15) {
top: calc(50%);
left: calc(50%);
transform: translate(171.5px, 169.5px) translateZ(-64px);
}
.star:nth-child(15) .slide {
-webkit-animation: fade 5000ms -11945ms linear infinite, slide 5000ms -11945ms linear infinite;
animation: fade 5000ms -11945ms linear infinite, slide 5000ms -11945ms linear infinite;
}
.star:nth-child(16) {
top: calc(50%);
left: calc(50%);
transform: translate(-44.5px, 50px) translateZ(-130px);
}
.star:nth-child(16) .slide {
-webkit-animation: fade 5000ms -39216ms linear infinite, slide 5000ms -39216ms linear infinite;
animation: fade 5000ms -39216ms linear infinite, slide 5000ms -39216ms linear infinite;
}
.star:nth-child(17) {
top: calc(50%);
left: calc(50%);
transform: translate(-210px, -48px) translateZ(-275px);
}
.star:nth-child(17) .slide {
-webkit-animation: fade 5000ms -36853ms linear infinite, slide 5000ms -36853ms linear infinite;
animation: fade 5000ms -36853ms linear infinite, slide 5000ms -36853ms linear infinite;
}
.star:nth-child(18) {
top: calc(50%);
left: calc(50%);
transform: translate(-134px, 91px) translateZ(-149px);
}
.star:nth-child(18) .slide {
-webkit-animation: fade 5000ms -3837ms linear infinite, slide 5000ms -3837ms linear infinite;
animation: fade 5000ms -3837ms linear infinite, slide 5000ms -3837ms linear infinite;
}
.star:nth-child(19) {
top: calc(50%);
left: calc(50%);
transform: translate(-76px, 24.5px) translateZ(-213px);
}
.star:nth-child(19) .slide {
-webkit-animation: fade 5000ms -29112ms linear infinite, slide 5000ms -29112ms linear infinite;
animation: fade 5000ms -29112ms linear infinite, slide 5000ms -29112ms linear infinite;
}
.star:nth-child(20) {
top: calc(50%);
left: calc(50%);
transform: translate(-41px, 36px) translateZ(-275px);
}
.star:nth-child(20) .slide {
-webkit-animation: fade 5000ms -15441ms linear infinite, slide 5000ms -15441ms linear infinite;
animation: fade 5000ms -15441ms linear infinite, slide 5000ms -15441ms linear infinite;
}
.star:nth-child(21) {
top: calc(50%);
left: calc(50%);
transform: translate(137px, -5px) translateZ(-354px);
}
.star:nth-child(21) .slide {
-webkit-animation: fade 5000ms -1646ms linear infinite, slide 5000ms -1646ms linear infinite;
animation: fade 5000ms -1646ms linear infinite, slide 5000ms -1646ms linear infinite;
}
.star:nth-child(22) {
top: calc(50%);
left: calc(50%);
transform: translate(250.5px, 147px) translateZ(-5px);
}
.star:nth-child(22) .slide {
-webkit-animation: fade 5000ms -29850ms linear infinite, slide 5000ms -29850ms linear infinite;
animation: fade 5000ms -29850ms linear infinite, slide 5000ms -29850ms linear infinite;
}
.star:nth-child(23) {
top: calc(50%);
left: calc(50%);
transform: translate(-263px, 101.5px) translateZ(-334px);
}
.star:nth-child(23) .slide {
-webkit-animation: fade 5000ms -26233ms linear infinite, slide 5000ms -26233ms linear infinite;
animation: fade 5000ms -26233ms linear infinite, slide 5000ms -26233ms linear infinite;
}
.star:nth-child(24) {
top: calc(50%);
left: calc(50%);
transform: translate(-232.5px, -88.5px) translateZ(-280px);
}
.star:nth-child(24) .slide {
-webkit-animation: fade 5000ms -15672ms linear infinite, slide 5000ms -15672ms linear infinite;
animation: fade 5000ms -15672ms linear infinite, slide 5000ms -15672ms linear infinite;
}
.star:nth-child(25) {
top: calc(50%);
left: calc(50%);
transform: translate(137px, -53.5px) translateZ(-181px);
}
.star:nth-child(25) .slide {
-webkit-animation: fade 5000ms -20166ms linear infinite, slide 5000ms -20166ms linear infinite;
animation: fade 5000ms -20166ms linear infinite, slide 5000ms -20166ms linear infinite;
}
.star:nth-child(26) {
top: calc(50%);
left: calc(50%);
transform: translate(-108px, 108px) translateZ(-347px);
}
.star:nth-child(26) .slide {
-webkit-animation: fade 5000ms -19373ms linear infinite, slide 5000ms -19373ms linear infinite;
animation: fade 5000ms -19373ms linear infinite, slide 5000ms -19373ms linear infinite;
}
.star:nth-child(27) {
top: calc(50%);
left: calc(50%);
transform: translate(-13.5px, -2px) translateZ(-393px);
}
.star:nth-child(27) .slide {
-webkit-animation: fade 5000ms -33457ms linear infinite, slide 5000ms -33457ms linear infinite;
animation: fade 5000ms -33457ms linear infinite, slide 5000ms -33457ms linear infinite;
}
.star:nth-child(28) {
top: calc(50%);
left: calc(50%);
transform: translate(-86px, -289px) translateZ(-302px);
}
.star:nth-child(28) .slide {
-webkit-animation: fade 5000ms -10599ms linear infinite, slide 5000ms -10599ms linear infinite;
animation: fade 5000ms -10599ms linear infinite, slide 5000ms -10599ms linear infinite;
}
.star:nth-child(29) {
top: calc(50%);
left: calc(50%);
transform: translate(-262.5px, 45px) translateZ(-246px);
}
.star:nth-child(29) .slide {
-webkit-animation: fade 5000ms -16558ms linear infinite, slide 5000ms -16558ms linear infinite;
animation: fade 5000ms -16558ms linear infinite, slide 5000ms -16558ms linear infinite;
}
.star:nth-child(30) {
top: calc(50%);
left: calc(50%);
transform: translate(-18px, 23.5px) translateZ(-375px);
}
.star:nth-child(30) .slide {
-webkit-animation: fade 5000ms -28968ms linear infinite, slide 5000ms -28968ms linear infinite;
animation: fade 5000ms -28968ms linear infinite, slide 5000ms -28968ms linear infinite;
}
.star:nth-child(31) {
top: calc(50%);
left: calc(50%);
transform: translate(-51.5px, 56px) translateZ(-204px);
}
.star:nth-child(31) .slide {
-webkit-animation: fade 5000ms -20984ms linear infinite, slide 5000ms -20984ms linear infinite;
animation: fade 5000ms -20984ms linear infinite, slide 5000ms -20984ms linear infinite;
}
.star:nth-child(32) {
top: calc(50%);
left: calc(50%);
transform: translate(87.5px, -5.5px) translateZ(-441px);
}
.star:nth-child(32) .slide {
-webkit-animation: fade 5000ms -35524ms linear infinite, slide 5000ms -35524ms linear infinite;
animation: fade 5000ms -35524ms linear infinite, slide 5000ms -35524ms linear infinite;
}
.star:nth-child(33) {
top: calc(50%);
left: calc(50%);
transform: translate(39px, -86.5px) translateZ(-468px);
}
.star:nth-child(33) .slide {
-webkit-animation: fade 5000ms -28500ms linear infinite, slide 5000ms -28500ms linear infinite;
animation: fade 5000ms -28500ms linear infinite, slide 5000ms -28500ms linear infinite;
}
.star:nth-child(34) {
top: calc(50%);
left: calc(50%);
transform: translate(107px, 58px) translateZ(-5px);
}
.star:nth-child(34) .slide {
-webkit-animation: fade 5000ms -16424ms linear infinite, slide 5000ms -16424ms linear infinite;
animation: fade 5000ms -16424ms linear infinite, slide 5000ms -16424ms linear infinite;
}
.star:nth-child(35) {
top: calc(50%);
left: calc(50%);
transform: translate(102px, -118.5px) translateZ(-197px);
}
.star:nth-child(35) .slide {
-webkit-animation: fade 5000ms -20114ms linear infinite, slide 5000ms -20114ms linear infinite;
animation: fade 5000ms -20114ms linear infinite, slide 5000ms -20114ms linear infinite;
}
.star:nth-child(36) {
top: calc(50%);
left: calc(50%);
transform: translate(-2.5px, 149px) translateZ(-402px);
}
.star:nth-child(36) .slide {
-webkit-animation: fade 5000ms -3701ms linear infinite, slide 5000ms -3701ms linear infinite;
animation: fade 5000ms -3701ms linear infinite, slide 5000ms -3701ms linear infinite;
}
.star:nth-child(37) {
top: calc(50%);
left: calc(50%);
transform: translate(-51px, -67px) translateZ(-173px);
}
.star:nth-child(37) .slide {
-webkit-animation: fade 5000ms -13960ms linear infinite, slide 5000ms -13960ms linear infinite;
animation: fade 5000ms -13960ms linear infinite, slide 5000ms -13960ms linear infinite;
}
.star:nth-child(38) {
top: calc(50%);
left: calc(50%);
transform: translate(44px, 151.5px) translateZ(-90px);
}
.star:nth-child(38) .slide {
-webkit-animation: fade 5000ms -15047ms linear infinite, slide 5000ms -15047ms linear infinite;
animation: fade 5000ms -15047ms linear infinite, slide 5000ms -15047ms linear infinite;
}
.star:nth-child(39) {
top: calc(50%);
left: calc(50%);
transform: translate(80px, -91.5px) translateZ(-97px);
}
.star:nth-child(39) .slide {
-webkit-animation: fade 5000ms -37961ms linear infinite, slide 5000ms -37961ms linear infinite;
animation: fade 5000ms -37961ms linear infinite, slide 5000ms -37961ms linear infinite;
}
.star:nth-child(40) {
top: calc(50%);
left: calc(50%);
transform: translate(-98px, -91px) translateZ(-223px);
}
.star:nth-child(40) .slide {
-webkit-animation: fade 5000ms -3926ms linear infinite, slide 5000ms -3926ms linear infinite;
animation: fade 5000ms -3926ms linear infinite, slide 5000ms -3926ms linear infinite;
}
.star:nth-child(41) {
top: calc(50%);
left: calc(50%);
transform: translate(125.5px, -212px) translateZ(-395px);
}
.star:nth-child(41) .slide {
-webkit-animation: fade 5000ms -13110ms linear infinite, slide 5000ms -13110ms linear infinite;
animation: fade 5000ms -13110ms linear infinite, slide 5000ms -13110ms linear infinite;
}
.star:nth-child(42) {
top: calc(50%);
left: calc(50%);
transform: translate(-34.5px, 114.5px) translateZ(-290px);
}
.star:nth-child(42) .slide {
-webkit-animation: fade 5000ms -18056ms linear infinite, slide 5000ms -18056ms linear infinite;
animation: fade 5000ms -18056ms linear infinite, slide 5000ms -18056ms linear infinite;
}
.star:nth-child(43) {
top: calc(50%);
left: calc(50%);
transform: translate(140px, 214.5px) translateZ(-65px);
}
.star:nth-child(43) .slide {
-webkit-animation: fade 5000ms -34484ms linear infinite, slide 5000ms -34484ms linear infinite;
animation: fade 5000ms -34484ms linear infinite, slide 5000ms -34484ms linear infinite;
}
.star:nth-child(44) {
top: calc(50%);
left: calc(50%);
transform: translate(-10.5px, -49px) translateZ(-292px);
}
.star:nth-child(44) .slide {
-webkit-animation: fade 5000ms -35086ms linear infinite, slide 5000ms -35086ms linear infinite;
animation: fade 5000ms -35086ms linear infinite, slide 5000ms -35086ms linear infinite;
}
.star:nth-child(45) {
top: calc(50%);
left: calc(50%);
transform: translate(-122.5px, 65.5px) translateZ(-254px);
}
.star:nth-child(45) .slide {
-webkit-animation: fade 5000ms -10438ms linear infinite, slide 5000ms -10438ms linear infinite;
animation: fade 5000ms -10438ms linear infinite, slide 5000ms -10438ms linear infinite;
}
.star:nth-child(46) {
top: calc(50%);
left: calc(50%);
transform: translate(43px, 150px) translateZ(-144px);
}
.star:nth-child(46) .slide {
-webkit-animation: fade 5000ms -2136ms linear infinite, slide 5000ms -2136ms linear infinite;
animation: fade 5000ms -2136ms linear infinite, slide 5000ms -2136ms linear infinite;
}
.star:nth-child(47) {
top: calc(50%);
left: calc(50%);
transform: translate(-258.5px, 223.5px) translateZ(-105px);
}
.star:nth-child(47) .slide {
-webkit-animation: fade 5000ms -36583ms linear infinite, slide 5000ms -36583ms linear infinite;
animation: fade 5000ms -36583ms linear infinite, slide 5000ms -36583ms linear infinite;
}
.star:nth-child(48) {
top: calc(50%);
left: calc(50%);
transform: translate(-176px, -142px) translateZ(-217px);
}
.star:nth-child(48) .slide {
-webkit-animation: fade 5000ms -27565ms linear infinite, slide 5000ms -27565ms linear infinite;
animation: fade 5000ms -27565ms linear infinite, slide 5000ms -27565ms linear infinite;
}
.star:nth-child(49) {
top: calc(50%);
left: calc(50%);
transform: translate(127.5px, 66.5px) translateZ(-145px);
}
.star:nth-child(49) .slide {
-webkit-animation: fade 5000ms -14138ms linear infinite, slide 5000ms -14138ms linear infinite;
animation: fade 5000ms -14138ms linear infinite, slide 5000ms -14138ms linear infinite;
}
.star:nth-child(50) {
top: calc(50%);
left: calc(50%);
transform: translate(-91px, -18.5px) translateZ(-484px);
}
.star:nth-child(50) .slide {
-webkit-animation: fade 5000ms -26084ms linear infinite, slide 5000ms -26084ms linear infinite;
animation: fade 5000ms -26084ms linear infinite, slide 5000ms -26084ms linear infinite;
}
.star:nth-child(51) {
top: calc(50%);
left: calc(50%);
transform: translate(4px, 46px) translateZ(-251px);
}
.star:nth-child(51) .slide {
-webkit-animation: fade 5000ms -15858ms linear infinite, slide 5000ms -15858ms linear infinite;
animation: fade 5000ms -15858ms linear infinite, slide 5000ms -15858ms linear infinite;
}
.star:nth-child(52) {
top: calc(50%);
left: calc(50%);
transform: translate(32px, -3px) translateZ(-362px);
}
.star:nth-child(52) .slide {
-webkit-animation: fade 5000ms -10593ms linear infinite, slide 5000ms -10593ms linear infinite;
animation: fade 5000ms -10593ms linear infinite, slide 5000ms -10593ms linear infinite;
}
.star:nth-child(53) {
top: calc(50%);
left: calc(50%);
transform: translate(118px, 240.5px) translateZ(-160px);
}
.star:nth-child(53) .slide {
-webkit-animation: fade 5000ms -6275ms linear infinite, slide 5000ms -6275ms linear infinite;
animation: fade 5000ms -6275ms linear infinite, slide 5000ms -6275ms linear infinite;
}
.star:nth-child(54) {
top: calc(50%);
left: calc(50%);
transform: translate(66px, -270px) translateZ(-425px);
}
.star:nth-child(54) .slide {
-webkit-animation: fade 5000ms -4998ms linear infinite, slide 5000ms -4998ms linear infinite;
animation: fade 5000ms -4998ms linear infinite, slide 5000ms -4998ms linear infinite;
}
.star:nth-child(55) {
top: calc(50%);
left: calc(50%);
transform: translate(102px, 177.5px) translateZ(-451px);
}
.star:nth-child(55) .slide {
-webkit-animation: fade 5000ms -15061ms linear infinite, slide 5000ms -15061ms linear infinite;
animation: fade 5000ms -15061ms linear infinite, slide 5000ms -15061ms linear infinite;
}
.star:nth-child(56) {
top: calc(50%);
left: calc(50%);
transform: translate(14px, -117.5px) translateZ(-44px);
}
.star:nth-child(56) .slide {
-webkit-animation: fade 5000ms -18649ms linear infinite, slide 5000ms -18649ms linear infinite;
animation: fade 5000ms -18649ms linear infinite, slide 5000ms -18649ms linear infinite;
}
.star:nth-child(57) {
top: calc(50%);
left: calc(50%);
transform: translate(-56.5px, -21.5px) translateZ(-424px);
}
.star:nth-child(57) .slide {
-webkit-animation: fade 5000ms -8152ms linear infinite, slide 5000ms -8152ms linear infinite;
animation: fade 5000ms -8152ms linear infinite, slide 5000ms -8152ms linear infinite;
}
.star:nth-child(58) {
top: calc(50%);
left: calc(50%);
transform: translate(-39px, -18.5px) translateZ(-74px);
}
.star:nth-child(58) .slide {
-webkit-animation: fade 5000ms -29167ms linear infinite, slide 5000ms -29167ms linear infinite;
animation: fade 5000ms -29167ms linear infinite, slide 5000ms -29167ms linear infinite;
}
.star:nth-child(59) {
top: calc(50%);
left: calc(50%);
transform: translate(31px, 67.5px) translateZ(-486px);
}
.star:nth-child(59) .slide {
-webkit-animation: fade 5000ms -9819ms linear infinite, slide 5000ms -9819ms linear infinite;
animation: fade 5000ms -9819ms linear infinite, slide 5000ms -9819ms linear infinite;
}
.star:nth-child(60) {
top: calc(50%);
left: calc(50%);
transform: translate(-60.5px, -107.5px) translateZ(-152px);
}
.star:nth-child(60) .slide {
-webkit-animation: fade 5000ms -4922ms linear infinite, slide 5000ms -4922ms linear infinite;
animation: fade 5000ms -4922ms linear infinite, slide 5000ms -4922ms linear infinite;
}
.star:nth-child(61) {
top: calc(50%);
left: calc(50%);
transform: translate(-53px, -227.5px) translateZ(-325px);
}
.star:nth-child(61) .slide {
-webkit-animation: fade 5000ms -7364ms linear infinite, slide 5000ms -7364ms linear infinite;
animation: fade 5000ms -7364ms linear infinite, slide 5000ms -7364ms linear infinite;
}
.star:nth-child(62) {
top: calc(50%);
left: calc(50%);
transform: translate(155px, -7.5px) translateZ(-56px);
}
.star:nth-child(62) .slide {
-webkit-animation: fade 5000ms -4690ms linear infinite, slide 5000ms -4690ms linear infinite;
animation: fade 5000ms -4690ms linear infinite, slide 5000ms -4690ms linear infinite;
}
.star:nth-child(63) {
top: calc(50%);
left: calc(50%);
transform: translate(-170px, -138px) translateZ(-38px);
}
.star:nth-child(63) .slide {
-webkit-animation: fade 5000ms -9674ms linear infinite, slide 5000ms -9674ms linear infinite;
animation: fade 5000ms -9674ms linear infinite, slide 5000ms -9674ms linear infinite;
}
.star:nth-child(64) {
top: calc(50%);
left: calc(50%);
transform: translate(-1.5px, -10px) translateZ(-115px);
}
.star:nth-child(64) .slide {
-webkit-animation: fade 5000ms -25778ms linear infinite, slide 5000ms -25778ms linear infinite;
animation: fade 5000ms -25778ms linear infinite, slide 5000ms -25778ms linear infinite;
}
.star:nth-child(65) {
top: calc(50%);
left: calc(50%);
transform: translate(138px, -172px) translateZ(-326px);
}
.star:nth-child(65) .slide {
-webkit-animation: fade 5000ms -27907ms linear infinite, slide 5000ms -27907ms linear infinite;
animation: fade 5000ms -27907ms linear infinite, slide 5000ms -27907ms linear infinite;
}
.star:nth-child(66) {
top: calc(50%);
left: calc(50%);
transform: translate(-46.5px, 207px) translateZ(-383px);
}
.star:nth-child(66) .slide {
-webkit-animation: fade 5000ms -32771ms linear infinite, slide 5000ms -32771ms linear infinite;
animation: fade 5000ms -32771ms linear infinite, slide 5000ms -32771ms linear infinite;
}
.star:nth-child(67) {
top: calc(50%);
left: calc(50%);
transform: translate(135.5px, -214px) translateZ(-24px);
}
.star:nth-child(67) .slide {
-webkit-animation: fade 5000ms -27911ms linear infinite, slide 5000ms -27911ms linear infinite;
animation: fade 5000ms -27911ms linear infinite, slide 5000ms -27911ms linear infinite;
}
.star:nth-child(68) {
top: calc(50%);
left: calc(50%);
transform: translate(57.5px, 137.5px) translateZ(-123px);
}
.star:nth-child(68) .slide {
-webkit-animation: fade 5000ms -18696ms linear infinite, slide 5000ms -18696ms linear infinite;
animation: fade 5000ms -18696ms linear infinite, slide 5000ms -18696ms linear infinite;
}
.star:nth-child(69) {
top: calc(50%);
left: calc(50%);
transform: translate(124px, 11px) translateZ(-490px);
}
.star:nth-child(69) .slide {
-webkit-animation: fade 5000ms -26768ms linear infinite, slide 5000ms -26768ms linear infinite;
animation: fade 5000ms -26768ms linear infinite, slide 5000ms -26768ms linear infinite;
}
.star:nth-child(70) {
top: calc(50%);
left: calc(50%);
transform: translate(-44.5px, -76px) translateZ(-282px);
}
.star:nth-child(70) .slide {
-webkit-animation: fade 5000ms -21017ms linear infinite, slide 5000ms -21017ms linear infinite;
animation: fade 5000ms -21017ms linear infinite, slide 5000ms -21017ms linear infinite;
}
.star:nth-child(71) {
top: calc(50%);
left: calc(50%);
transform: translate(134.5px, 114.5px) translateZ(-133px);
}
.star:nth-child(71) .slide {
-webkit-animation: fade 5000ms -34611ms linear infinite, slide 5000ms -34611ms linear infinite;
animation: fade 5000ms -34611ms linear infinite, slide 5000ms -34611ms linear infinite;
}
.star:nth-child(72) {
top: calc(50%);
left: calc(50%);
transform: translate(76.5px, 127.5px) translateZ(-379px);
}
.star:nth-child(72) .slide {
-webkit-animation: fade 5000ms -22960ms linear infinite, slide 5000ms -22960ms linear infinite;
animation: fade 5000ms -22960ms linear infinite, slide 5000ms -22960ms linear infinite;
}
.star:nth-child(73) {
top: calc(50%);
left: calc(50%);
transform: translate(-53.5px, -105px) translateZ(-361px);
}
.star:nth-child(73) .slide {
-webkit-animation: fade 5000ms -32906ms linear infinite, slide 5000ms -32906ms linear infinite;
animation: fade 5000ms -32906ms linear infinite, slide 5000ms -32906ms linear infinite;
}
.star:nth-child(74) {
top: calc(50%);
left: calc(50%);
transform: translate(-60.5px, 19px) translateZ(-193px);
}
.star:nth-child(74) .slide {
-webkit-animation: fade 5000ms -22289ms linear infinite, slide 5000ms -22289ms linear infinite;
animation: fade 5000ms -22289ms linear infinite, slide 5000ms -22289ms linear infinite;
}
.star:nth-child(75) {
top: calc(50%);
left: calc(50%);
transform: translate(121px, -130px) translateZ(-140px);
}
.star:nth-child(75) .slide {
-webkit-animation: fade 5000ms -6254ms linear infinite, slide 5000ms -6254ms linear infinite;
animation: fade 5000ms -6254ms linear infinite, slide 5000ms -6254ms linear infinite;
}
.star:nth-child(76) {
top: calc(50%);
left: calc(50%);
transform: translate(-105px, 87px) translateZ(-151px);
}
.star:nth-child(76) .slide {
-webkit-animation: fade 5000ms -38749ms linear infinite, slide 5000ms -38749ms linear infinite;
animation: fade 5000ms -38749ms linear infinite, slide 5000ms -38749ms linear infinite;
}
.star:nth-child(77) {
top: calc(50%);
left: calc(50%);
transform: translate(-170px, 76px) translateZ(-368px);
}
.star:nth-child(77) .slide {
-webkit-animation: fade 5000ms -38239ms linear infinite, slide 5000ms -38239ms linear infinite;
animation: fade 5000ms -38239ms linear infinite, slide 5000ms -38239ms linear infinite;
}
.star:nth-child(78) {
top: calc(50%);
left: calc(50%);
transform: translate(232px, -137.5px) translateZ(-472px);
}
.star:nth-child(78) .slide {
-webkit-animation: fade 5000ms -39869ms linear infinite, slide 5000ms -39869ms linear infinite;
animation: fade 5000ms -39869ms linear infinite, slide 5000ms -39869ms linear infinite;
}
.star:nth-child(79) {
top: calc(50%);
left: calc(50%);
transform: translate(-15px, 148.5px) translateZ(-430px);
}
.star:nth-child(79) .slide {
-webkit-animation: fade 5000ms -17207ms linear infinite, slide 5000ms -17207ms linear infinite;
animation: fade 5000ms -17207ms linear infinite, slide 5000ms -17207ms linear infinite;
}
.star:nth-child(80) {
top: calc(50%);
left: calc(50%);
transform: translate(9px, 279px) translateZ(-220px);
}
.star:nth-child(80) .slide {
-webkit-animation: fade 5000ms -36714ms linear infinite, slide 5000ms -36714ms linear infinite;
animation: fade 5000ms -36714ms linear infinite, slide 5000ms -36714ms linear infinite;
}
.star:nth-child(81) {
top: calc(50%);
left: calc(50%);
transform: translate(-8.5px, -11.5px) translateZ(-499px);
}
.star:nth-child(81) .slide {
-webkit-animation: fade 5000ms -38788ms linear infinite, slide 5000ms -38788ms linear infinite;
animation: fade 5000ms -38788ms linear infinite, slide 5000ms -38788ms linear infinite;
}
.star:nth-child(82) {
top: calc(50%);
left: calc(50%);
transform: translate(137.5px, -98.5px) translateZ(-153px);
}
.star:nth-child(82) .slide {
-webkit-animation: fade 5000ms -2120ms linear infinite, slide 5000ms -2120ms linear infinite;
animation: fade 5000ms -2120ms linear infinite, slide 5000ms -2120ms linear infinite;
}
.star:nth-child(83) {
top: calc(50%);
left: calc(50%);
transform: translate(116px, -20.5px) translateZ(-391px);
}
.star:nth-child(83) .slide {
-webkit-animation: fade 5000ms -22027ms linear infinite, slide 5000ms -22027ms linear infinite;
animation: fade 5000ms -22027ms linear infinite, slide 5000ms -22027ms linear infinite;
}
.star:nth-child(84) {
top: calc(50%);
left: calc(50%);
transform: translate(80.5px, -1px) translateZ(-483px);
}
.star:nth-child(84) .slide {
-webkit-animation: fade 5000ms -28929ms linear infinite, slide 5000ms -28929ms linear infinite;
animation: fade 5000ms -28929ms linear infinite, slide 5000ms -28929ms linear infinite;
}
.star:nth-child(85) {
top: calc(50%);
left: calc(50%);
transform: translate(25px, -42.5px) translateZ(-207px);
}
.star:nth-child(85) .slide {
-webkit-animation: fade 5000ms -28881ms linear infinite, slide 5000ms -28881ms linear infinite;
animation: fade 5000ms -28881ms linear infinite, slide 5000ms -28881ms linear infinite;
}
.star:nth-child(86) {
top: calc(50%);
left: calc(50%);
transform: translate(-34px, -3.5px) translateZ(-168px);
}
.star:nth-child(86) .slide {
-webkit-animation: fade 5000ms -33094ms linear infinite, slide 5000ms -33094ms linear infinite;
animation: fade 5000ms -33094ms linear infinite, slide 5000ms -33094ms linear infinite;
}
.star:nth-child(87) {
top: calc(50%);
left: calc(50%);
transform: translate(-72.5px, 45px) translateZ(-499px);
}
.star:nth-child(87) .slide {
-webkit-animation: fade 5000ms -23488ms linear infinite, slide 5000ms -23488ms linear infinite;
animation: fade 5000ms -23488ms linear infinite, slide 5000ms -23488ms linear infinite;
}
.star:nth-child(88) {
top: calc(50%);
left: calc(50%);
transform: translate(191px, -58px) translateZ(-267px);
}
.star:nth-child(88) .slide {
-webkit-animation: fade 5000ms -21479ms linear infinite, slide 5000ms -21479ms linear infinite;
animation: fade 5000ms -21479ms linear infinite, slide 5000ms -21479ms linear infinite;
}
.star:nth-child(89) {
top: calc(50%);
left: calc(50%);
transform: translate(31px, 130px) translateZ(-249px);
}
.star:nth-child(89) .slide {
-webkit-animation: fade 5000ms -11172ms linear infinite, slide 5000ms -11172ms linear infinite;
animation: fade 5000ms -11172ms linear infinite, slide 5000ms -11172ms linear infinite;
}
.star:nth-child(90) {
top: calc(50%);
left: calc(50%);
transform: translate(87px, -168.5px) translateZ(-473px);
}
.star:nth-child(90) .slide {
-webkit-animation: fade 5000ms -31045ms linear infinite, slide 5000ms -31045ms linear infinite;
animation: fade 5000ms -31045ms linear infinite, slide 5000ms -31045ms linear infinite;
}
.star:nth-child(91) {
top: calc(50%);
left: calc(50%);
transform: translate(239.5px, -79.5px) translateZ(-251px);
}
.star:nth-child(91) .slide {
-webkit-animation: fade 5000ms -4462ms linear infinite, slide 5000ms -4462ms linear infinite;
animation: fade 5000ms -4462ms linear infinite, slide 5000ms -4462ms linear infinite;
}
.star:nth-child(92) {
top: calc(50%);
left: calc(50%);
transform: translate(-17px, 152.5px) translateZ(-129px);
}
.star:nth-child(92) .slide {
-webkit-animation: fade 5000ms -10041ms linear infinite, slide 5000ms -10041ms linear infinite;
animation: fade 5000ms -10041ms linear infinite, slide 5000ms -10041ms linear infinite;
}
.star:nth-child(93) {
top: calc(50%);
left: calc(50%);
transform: translate(234px, 266.5px) translateZ(-123px);
}
.star:nth-child(93) .slide {
-webkit-animation: fade 5000ms -34231ms linear infinite, slide 5000ms -34231ms linear infinite;
animation: fade 5000ms -34231ms linear infinite, slide 5000ms -34231ms linear infinite;
}
.star:nth-child(94) {
top: calc(50%);
left: calc(50%);
transform: translate(150px, 56.5px) translateZ(-121px);
}
.star:nth-child(94) .slide {
-webkit-animation: fade 5000ms -20344ms linear infinite, slide 5000ms -20344ms linear infinite;
animation: fade 5000ms -20344ms linear infinite, slide 5000ms -20344ms linear infinite;
}
.star:nth-child(95) {
top: calc(50%);
left: calc(50%);
transform: translate(19px, 144.5px) translateZ(-191px);
}
.star:nth-child(95) .slide {
-webkit-animation: fade 5000ms -31126ms linear infinite, slide 5000ms -31126ms linear infinite;
animation: fade 5000ms -31126ms linear infinite, slide 5000ms -31126ms linear infinite;
}
.star:nth-child(96) {
top: calc(50%);
left: calc(50%);
transform: translate(35px, -120.5px) translateZ(-377px);
}
.star:nth-child(96) .slide {
-webkit-animation: fade 5000ms -9724ms linear infinite, slide 5000ms -9724ms linear infinite;
animation: fade 5000ms -9724ms linear infinite, slide 5000ms -9724ms linear infinite;
}
.star:nth-child(97) {
top: calc(50%);
left: calc(50%);
transform: translate(-195px, 94.5px) translateZ(-218px);
}
.star:nth-child(97) .slide {
-webkit-animation: fade 5000ms -12872ms linear infinite, slide 5000ms -12872ms linear infinite;
animation: fade 5000ms -12872ms linear infinite, slide 5000ms -12872ms linear infinite;
}
.star:nth-child(98) {
top: calc(50%);
left: calc(50%);
transform: translate(0px, -21.5px) translateZ(-329px);
}
.star:nth-child(98) .slide {
-webkit-animation: fade 5000ms -21295ms linear infinite, slide 5000ms -21295ms linear infinite;
animation: fade 5000ms -21295ms linear infinite, slide 5000ms -21295ms linear infinite;
}
.star:nth-child(99) {
top: calc(50%);
left: calc(50%);
transform: translate(10px, -109.5px) translateZ(-174px);
}
.star:nth-child(99) .slide {
-webkit-animation: fade 5000ms -8477ms linear infinite, slide 5000ms -8477ms linear infinite;
animation: fade 5000ms -8477ms linear infinite, slide 5000ms -8477ms linear infinite;
}
.star:nth-child(100) {
top: calc(50%);
left: calc(50%);
transform: translate(-26.5px, 164.5px) translateZ(-298px);
}
.star:nth-child(100) .slide {
-webkit-animation: fade 5000ms -27775ms linear infinite, slide 5000ms -27775ms linear infinite;
animation: fade 5000ms -27775ms linear infinite, slide 5000ms -27775ms linear infinite;
}
.star:nth-child(101) {
top: calc(50%);
left: calc(50%);
transform: translate(-96px, -43.5px) translateZ(-210px);
}
.star:nth-child(101) .slide {
-webkit-animation: fade 5000ms -4024ms linear infinite, slide 5000ms -4024ms linear infinite;
animation: fade 5000ms -4024ms linear infinite, slide 5000ms -4024ms linear infinite;
}
.star:nth-child(102) {
top: calc(50%);
left: calc(50%);
transform: translate(-143px, 144.5px) translateZ(-72px);
}
.star:nth-child(102) .slide {
-webkit-animation: fade 5000ms -30074ms linear infinite, slide 5000ms -30074ms linear infinite;
animation: fade 5000ms -30074ms linear infinite, slide 5000ms -30074ms linear infinite;
}
.star:nth-child(103) {
top: calc(50%);
left: calc(50%);
transform: translate(-65.5px, -55.5px) translateZ(-210px);
}
.star:nth-child(103) .slide {
-webkit-animation: fade 5000ms -8294ms linear infinite, slide 5000ms -8294ms linear infinite;
animation: fade 5000ms -8294ms linear infinite, slide 5000ms -8294ms linear infinite;
}
.star:nth-child(104) {
top: calc(50%);
left: calc(50%);
transform: translate(-198px, -32.5px) translateZ(-388px);
}
.star:nth-child(104) .slide {
-webkit-animation: fade 5000ms -12825ms linear infinite, slide 5000ms -12825ms linear infinite;
animation: fade 5000ms -12825ms linear infinite, slide 5000ms -12825ms linear infinite;
}
.star:nth-child(105) {
top: calc(50%);
left: calc(50%);
transform: translate(50.5px, -30px) translateZ(-251px);
}
.star:nth-child(105) .slide {
-webkit-animation: fade 5000ms -28899ms linear infinite, slide 5000ms -28899ms linear infinite;
animation: fade 5000ms -28899ms linear infinite, slide 5000ms -28899ms linear infinite;
}
.star:nth-child(106) {
top: calc(50%);
left: calc(50%);
transform: translate(59.5px, -19px) translateZ(-49px);
}
.star:nth-child(106) .slide {
-webkit-animation: fade 5000ms -35938ms linear infinite, slide 5000ms -35938ms linear infinite;
animation: fade 5000ms -35938ms linear infinite, slide 5000ms -35938ms linear infinite;
}
.star:nth-child(107) {
top: calc(50%);
left: calc(50%);
transform: translate(5px, -34px) translateZ(-281px);
}
.star:nth-child(107) .slide {
-webkit-animation: fade 5000ms -8069ms linear infinite, slide 5000ms -8069ms linear infinite;
animation: fade 5000ms -8069ms linear infinite, slide 5000ms -8069ms linear infinite;
}
.star:nth-child(108) {
top: calc(50%);
left: calc(50%);
transform: translate(16.5px, -25px) translateZ(-261px);
}
.star:nth-child(108) .slide {
-webkit-animation: fade 5000ms -1978ms linear infinite, slide 5000ms -1978ms linear infinite;
animation: fade 5000ms -1978ms linear infinite, slide 5000ms -1978ms linear infinite;
}
.star:nth-child(109) {
top: calc(50%);
left: calc(50%);
transform: translate(203px, 74px) translateZ(-275px);
}
.star:nth-child(109) .slide {
-webkit-animation: fade 5000ms -13925ms linear infinite, slide 5000ms -13925ms linear infinite;
animation: fade 5000ms -13925ms linear infinite, slide 5000ms -13925ms linear infinite;
}
.star:nth-child(110) {
top: calc(50%);
left: calc(50%);
transform: translate(-131.5px, -37.5px) translateZ(-377px);
}
.star:nth-child(110) .slide {
-webkit-animation: fade 5000ms -15303ms linear infinite, slide 5000ms -15303ms linear infinite;
animation: fade 5000ms -15303ms linear infinite, slide 5000ms -15303ms linear infinite;
}
.star:nth-child(111) {
top: calc(50%);
left: calc(50%);
transform: translate(-145px, -88px) translateZ(-475px);
}
.star:nth-child(111) .slide {
-webkit-animation: fade 5000ms -1046ms linear infinite, slide 5000ms -1046ms linear infinite;
animation: fade 5000ms -1046ms linear infinite, slide 5000ms -1046ms linear infinite;
}
.star:nth-child(112) {
top: calc(50%);
left: calc(50%);
transform: translate(153.5px, -56.5px) translateZ(-84px);
}
.star:nth-child(112) .slide {
-webkit-animation: fade 5000ms -27215ms linear infinite, slide 5000ms -27215ms linear infinite;
animation: fade 5000ms -27215ms linear infinite, slide 5000ms -27215ms linear infinite;
}
.star:nth-child(113) {
top: calc(50%);
left: calc(50%);
transform: translate(-30px, 202.5px) translateZ(-161px);
}
.star:nth-child(113) .slide {
-webkit-animation: fade 5000ms -21007ms linear infinite, slide 5000ms -21007ms linear infinite;
animation: fade 5000ms -21007ms linear infinite, slide 5000ms -21007ms linear infinite;
}
.star:nth-child(114) {
top: calc(50%);
left: calc(50%);
transform: translate(16.5px, 150.5px) translateZ(-107px);
}
.star:nth-child(114) .slide {
-webkit-animation: fade 5000ms -23565ms linear infinite, slide 5000ms -23565ms linear infinite;
animation: fade 5000ms -23565ms linear infinite, slide 5000ms -23565ms linear infinite;
}
.star:nth-child(115) {
top: calc(50%);
left: calc(50%);
transform: translate(261.5px, 10px) translateZ(-98px);
}
.star:nth-child(115) .slide {
-webkit-animation: fade 5000ms -33145ms linear infinite, slide 5000ms -33145ms linear infinite;
animation: fade 5000ms -33145ms linear infinite, slide 5000ms -33145ms linear infinite;
}
.star:nth-child(116) {
top: calc(50%);
left: calc(50%);
transform: translate(-1px, -94.5px) translateZ(-360px);
}
.star:nth-child(116) .slide {
-webkit-animation: fade 5000ms -9988ms linear infinite, slide 5000ms -9988ms linear infinite;
animation: fade 5000ms -9988ms linear infinite, slide 5000ms -9988ms linear infinite;
}
.star:nth-child(117) {
top: calc(50%);
left: calc(50%);
transform: translate(108.5px, 32.5px) translateZ(-40px);
}
.star:nth-child(117) .slide {
-webkit-animation: fade 5000ms -20148ms linear infinite, slide 5000ms -20148ms linear infinite;
animation: fade 5000ms -20148ms linear infinite, slide 5000ms -20148ms linear infinite;
}
.star:nth-child(118) {
top: calc(50%);
left: calc(50%);
transform: translate(160px, 248px) translateZ(-196px);
}
.star:nth-child(118) .slide {
-webkit-animation: fade 5000ms -35274ms linear infinite, slide 5000ms -35274ms linear infinite;
animation: fade 5000ms -35274ms linear infinite, slide 5000ms -35274ms linear infinite;
}
.star:nth-child(119) {
top: calc(50%);
left: calc(50%);
transform: translate(-17.5px, -75px) translateZ(-61px);
}
.star:nth-child(119) .slide {
-webkit-animation: fade 5000ms -14160ms linear infinite, slide 5000ms -14160ms linear infinite;
animation: fade 5000ms -14160ms linear infinite, slide 5000ms -14160ms linear infinite;
}
.star:nth-child(120) {
top: calc(50%);
left: calc(50%);
transform: translate(206px, -116px) translateZ(-222px);
}
.star:nth-child(120) .slide {
-webkit-animation: fade 5000ms -9466ms linear infinite, slide 5000ms -9466ms linear infinite;
animation: fade 5000ms -9466ms linear infinite, slide 5000ms -9466ms linear infinite;
}
.star:nth-child(121) {
top: calc(50%);
left: calc(50%);
transform: translate(114px, -15.5px) translateZ(-472px);
}
.star:nth-child(121) .slide {
-webkit-animation: fade 5000ms -27884ms linear infinite, slide 5000ms -27884ms linear infinite;
animation: fade 5000ms -27884ms linear infinite, slide 5000ms -27884ms linear infinite;
}
.star:nth-child(122) {
top: calc(50%);
left: calc(50%);
transform: translate(-49.5px, -1px) translateZ(-92px);
}
.star:nth-child(122) .slide {
-webkit-animation: fade 5000ms -19253ms linear infinite, slide 5000ms -19253ms linear infinite;
animation: fade 5000ms -19253ms linear infinite, slide 5000ms -19253ms linear infinite;
}
.star:nth-child(123) {
top: calc(50%);
left: calc(50%);
transform: translate(-8px, 131px) translateZ(-446px);
}
.star:nth-child(123) .slide {
-webkit-animation: fade 5000ms -10508ms linear infinite, slide 5000ms -10508ms linear infinite;
animation: fade 5000ms -10508ms linear infinite, slide 5000ms -10508ms linear infinite;
}
.star:nth-child(124) {
top: calc(50%);
left: calc(50%);
transform: translate(-36.5px, 191px) translateZ(-33px);
}
.star:nth-child(124) .slide {
-webkit-animation: fade 5000ms -34212ms linear infinite, slide 5000ms -34212ms linear infinite;
animation: fade 5000ms -34212ms linear infinite, slide 5000ms -34212ms linear infinite;
}
.star:nth-child(125) {
top: calc(50%);
left: calc(50%);
transform: translate(-215.5px, -33.5px) translateZ(-134px);
}
.star:nth-child(125) .slide {
-webkit-animation: fade 5000ms -17768ms linear infinite, slide 5000ms -17768ms linear infinite;
animation: fade 5000ms -17768ms linear infinite, slide 5000ms -17768ms linear infinite;
}
.star:nth-child(126) {
top: calc(50%);
left: calc(50%);
transform: translate(-196.5px, 208.5px) translateZ(-293px);
}
.star:nth-child(126) .slide {
-webkit-animation: fade 5000ms -2176ms linear infinite, slide 5000ms -2176ms linear infinite;
animation: fade 5000ms -2176ms linear infinite, slide 5000ms -2176ms linear infinite;
}
.star:nth-child(127) {
top: calc(50%);
left: calc(50%);
transform: translate(194px, 121.5px) translateZ(-357px);
}
.star:nth-child(127) .slide {
-webkit-animation: fade 5000ms -28376ms linear infinite, slide 5000ms -28376ms linear infinite;
animation: fade 5000ms -28376ms linear infinite, slide 5000ms -28376ms linear infinite;
}
.star:nth-child(128) {
top: calc(50%);
left: calc(50%);
transform: translate(28px, 15px) translateZ(-300px);
}
.star:nth-child(128) .slide {
-webkit-animation: fade 5000ms -18242ms linear infinite, slide 5000ms -18242ms linear infinite;
animation: fade 5000ms -18242ms linear infinite, slide 5000ms -18242ms linear infinite;
}
.star:nth-child(129) {
top: calc(50%);
left: calc(50%);
transform: translate(32px, -48px) translateZ(-284px);
}
.star:nth-child(129) .slide {
-webkit-animation: fade 5000ms -23333ms linear infinite, slide 5000ms -23333ms linear infinite;
animation: fade 5000ms -23333ms linear infinite, slide 5000ms -23333ms linear infinite;
}
.star:nth-child(130) {
top: calc(50%);
left: calc(50%);
transform: translate(82.5px, -65px) translateZ(-469px);
}
.star:nth-child(130) .slide {
-webkit-animation: fade 5000ms -27762ms linear infinite, slide 5000ms -27762ms linear infinite;
animation: fade 5000ms -27762ms linear infinite, slide 5000ms -27762ms linear infinite;
}
.star:nth-child(131) {
top: calc(50%);
left: calc(50%);
transform: translate(17.5px, -58.5px) translateZ(-353px);
}
.star:nth-child(131) .slide {
-webkit-animation: fade 5000ms -10031ms linear infinite, slide 5000ms -10031ms linear infinite;
animation: fade 5000ms -10031ms linear infinite, slide 5000ms -10031ms linear infinite;
}
.star:nth-child(132) {
top: calc(50%);
left: calc(50%);
transform: translate(74px, -140.5px) translateZ(-196px);
}
.star:nth-child(132) .slide {
-webkit-animation: fade 5000ms -19927ms linear infinite, slide 5000ms -19927ms linear infinite;
animation: fade 5000ms -19927ms linear infinite, slide 5000ms -19927ms linear infinite;
}
.star:nth-child(133) {
top: calc(50%);
left: calc(50%);
transform: translate(-18px, 15px) translateZ(-398px);
}
.star:nth-child(133) .slide {
-webkit-animation: fade 5000ms -25044ms linear infinite, slide 5000ms -25044ms linear infinite;
animation: fade 5000ms -25044ms linear infinite, slide 5000ms -25044ms linear infinite;
}
.star:nth-child(134) {
top: calc(50%);
left: calc(50%);
transform: translate(146.5px, 124.5px) translateZ(-77px);
}
.star:nth-child(134) .slide {
-webkit-animation: fade 5000ms -29202ms linear infinite, slide 5000ms -29202ms linear infinite;
animation: fade 5000ms -29202ms linear infinite, slide 5000ms -29202ms linear infinite;
}
.star:nth-child(135) {
top: calc(50%);
left: calc(50%);
transform: translate(-268.5px, 200px) translateZ(-413px);
}
.star:nth-child(135) .slide {
-webkit-animation: fade 5000ms -26785ms linear infinite, slide 5000ms -26785ms linear infinite;
animation: fade 5000ms -26785ms linear infinite, slide 5000ms -26785ms linear infinite;
}
.star:nth-child(136) {
top: calc(50%);
left: calc(50%);
transform: translate(-242.5px, -244.5px) translateZ(-73px);
}
.star:nth-child(136) .slide {
-webkit-animation: fade 5000ms -10464ms linear infinite, slide 5000ms -10464ms linear infinite;
animation: fade 5000ms -10464ms linear infinite, slide 5000ms -10464ms linear infinite;
}
.star:nth-child(137) {
top: calc(50%);
left: calc(50%);
transform: translate(167.5px, -40.5px) translateZ(-197px);
}
.star:nth-child(137) .slide {
-webkit-animation: fade 5000ms -12593ms linear infinite, slide 5000ms -12593ms linear infinite;
animation: fade 5000ms -12593ms linear infinite, slide 5000ms -12593ms linear infinite;
}
.star:nth-child(138) {
top: calc(50%);
left: calc(50%);
transform: translate(131px, 142.5px) translateZ(-461px);
}
.star:nth-child(138) .slide {
-webkit-animation: fade 5000ms -19752ms linear infinite, slide 5000ms -19752ms linear infinite;
animation: fade 5000ms -19752ms linear infinite, slide 5000ms -19752ms linear infinite;
}
.star:nth-child(139) {
top: calc(50%);
left: calc(50%);
transform: translate(64.5px, 16px) translateZ(-391px);
}
.star:nth-child(139) .slide {
-webkit-animation: fade 5000ms -17170ms linear infinite, slide 5000ms -17170ms linear infinite;
animation: fade 5000ms -17170ms linear infinite, slide 5000ms -17170ms linear infinite;
}
.star:nth-child(140) {
top: calc(50%);
left: calc(50%);
transform: translate(-223px, 152.5px) translateZ(-415px);
}
.star:nth-child(140) .slide {
-webkit-animation: fade 5000ms -23584ms linear infinite, slide 5000ms -23584ms linear infinite;
animation: fade 5000ms -23584ms linear infinite, slide 5000ms -23584ms linear infinite;
}
.star:nth-child(141) {
top: calc(50%);
left: calc(50%);
transform: translate(-63px, -79px) translateZ(-293px);
}
.star:nth-child(141) .slide {
-webkit-animation: fade 5000ms -20707ms linear infinite, slide 5000ms -20707ms linear infinite;
animation: fade 5000ms -20707ms linear infinite, slide 5000ms -20707ms linear infinite;
}
.star:nth-child(142) {
top: calc(50%);
left: calc(50%);
transform: translate(40.5px, -226.5px) translateZ(-490px);
}
.star:nth-child(142) .slide {
-webkit-animation: fade 5000ms -2307ms linear infinite, slide 5000ms -2307ms linear infinite;
animation: fade 5000ms -2307ms linear infinite, slide 5000ms -2307ms linear infinite;
}
.star:nth-child(143) {
top: calc(50%);
left: calc(50%);
transform: translate(-173.5px, 92px) translateZ(-370px);
}
.star:nth-child(143) .slide {
-webkit-animation: fade 5000ms -19548ms linear infinite, slide 5000ms -19548ms linear infinite;
animation: fade 5000ms -19548ms linear infinite, slide 5000ms -19548ms linear infinite;
}
.star:nth-child(144) {
top: calc(50%);
left: calc(50%);
transform: translate(73px, -110.5px) translateZ(-256px);
}
.star:nth-child(144) .slide {
-webkit-animation: fade 5000ms -12214ms linear infinite, slide 5000ms -12214ms linear infinite;
animation: fade 5000ms -12214ms linear infinite, slide 5000ms -12214ms linear infinite;
}
.star:nth-child(145) {
top: calc(50%);
left: calc(50%);
transform: translate(89px, -80px) translateZ(-151px);
}
.star:nth-child(145) .slide {
-webkit-animation: fade 5000ms -1269ms linear infinite, slide 5000ms -1269ms linear infinite;
animation: fade 5000ms -1269ms linear infinite, slide 5000ms -1269ms linear infinite;
}
.star:nth-child(146) {
top: calc(50%);
left: calc(50%);
transform: translate(66px, -114px) translateZ(-217px);
}
.star:nth-child(146) .slide {
-webkit-animation: fade 5000ms -4773ms linear infinite, slide 5000ms -4773ms linear infinite;
animation: fade 5000ms -4773ms linear infinite, slide 5000ms -4773ms linear infinite;
}
.star:nth-child(147) {
top: calc(50%);
left: calc(50%);
transform: translate(7.5px, -226.5px) translateZ(-84px);
}
.star:nth-child(147) .slide {
-webkit-animation: fade 5000ms -4284ms linear infinite, slide 5000ms -4284ms linear infinite;
animation: fade 5000ms -4284ms linear infinite, slide 5000ms -4284ms linear infinite;
}
.star:nth-child(148) {
top: calc(50%);
left: calc(50%);
transform: translate(214px, 100px) translateZ(-85px);
}
.star:nth-child(148) .slide {
-webkit-animation: fade 5000ms -1812ms linear infinite, slide 5000ms -1812ms linear infinite;
animation: fade 5000ms -1812ms linear infinite, slide 5000ms -1812ms linear infinite;
}
.star:nth-child(149) {
top: calc(50%);
left: calc(50%);
transform: translate(186px, -147.5px) translateZ(-60px);
}
.star:nth-child(149) .slide {
-webkit-animation: fade 5000ms -31517ms linear infinite, slide 5000ms -31517ms linear infinite;
animation: fade 5000ms -31517ms linear infinite, slide 5000ms -31517ms linear infinite;
}
.star:nth-child(150) {
top: calc(50%);
left: calc(50%);
transform: translate(26.5px, 143.5px) translateZ(-35px);
}
.star:nth-child(150) .slide {
-webkit-animation: fade 5000ms -26182ms linear infinite, slide 5000ms -26182ms linear infinite;
animation: fade 5000ms -26182ms linear infinite, slide 5000ms -26182ms linear infinite;
}
.star:nth-child(151) {
top: calc(50%);
left: calc(50%);
transform: translate(27.5px, 247.5px) translateZ(-469px);
}
.star:nth-child(151) .slide {
-webkit-animation: fade 5000ms -32896ms linear infinite, slide 5000ms -32896ms linear infinite;
animation: fade 5000ms -32896ms linear infinite, slide 5000ms -32896ms linear infinite;
}
.star:nth-child(152) {
top: calc(50%);
left: calc(50%);
transform: translate(-50.5px, -28px) translateZ(-310px);
}
.star:nth-child(152) .slide {
-webkit-animation: fade 5000ms -33622ms linear infinite, slide 5000ms -33622ms linear infinite;
animation: fade 5000ms -33622ms linear infinite, slide 5000ms -33622ms linear infinite;
}
.star:nth-child(153) {
top: calc(50%);
left: calc(50%);
transform: translate(-3.5px, -19.5px) translateZ(-225px);
}
.star:nth-child(153) .slide {
-webkit-animation: fade 5000ms -36381ms linear infinite, slide 5000ms -36381ms linear infinite;
animation: fade 5000ms -36381ms linear infinite, slide 5000ms -36381ms linear infinite;
}
.star:nth-child(154) {
top: calc(50%);
left: calc(50%);
transform: translate(131px, -124px) translateZ(-112px);
}
.star:nth-child(154) .slide {
-webkit-animation: fade 5000ms -18554ms linear infinite, slide 5000ms -18554ms linear infinite;
animation: fade 5000ms -18554ms linear infinite, slide 5000ms -18554ms linear infinite;
}
.star:nth-child(155) {
top: calc(50%);
left: calc(50%);
transform: translate(-219px, -112px) translateZ(-329px);
}
.star:nth-child(155) .slide {
-webkit-animation: fade 5000ms -7783ms linear infinite, slide 5000ms -7783ms linear infinite;
animation: fade 5000ms -7783ms linear infinite, slide 5000ms -7783ms linear infinite;
}
.star:nth-child(156) {
top: calc(50%);
left: calc(50%);
transform: translate(9.5px, 229px) translateZ(-130px);
}
.star:nth-child(156) .slide {
-webkit-animation: fade 5000ms -975ms linear infinite, slide 5000ms -975ms linear infinite;
animation: fade 5000ms -975ms linear infinite, slide 5000ms -975ms linear infinite;
}
.star:nth-child(157) {
top: calc(50%);
left: calc(50%);
transform: translate(182.5px, -159.5px) translateZ(-146px);
}
.star:nth-child(157) .slide {
-webkit-animation: fade 5000ms -13715ms linear infinite, slide 5000ms -13715ms linear infinite;
animation: fade 5000ms -13715ms linear infinite, slide 5000ms -13715ms linear infinite;
}
.star:nth-child(158) {
top: calc(50%);
left: calc(50%);
transform: translate(-192px, 178.5px) translateZ(-296px);
}
.star:nth-child(158) .slide {
-webkit-animation: fade 5000ms -38151ms linear infinite, slide 5000ms -38151ms linear infinite;
animation: fade 5000ms -38151ms linear infinite, slide 5000ms -38151ms linear infinite;
}
.star:nth-child(159) {
top: calc(50%);
left: calc(50%);
transform: translate(-90px, 55.5px) translateZ(-171px);
}
.star:nth-child(159) .slide {
-webkit-animation: fade 5000ms -9514ms linear infinite, slide 5000ms -9514ms linear infinite;
animation: fade 5000ms -9514ms linear infinite, slide 5000ms -9514ms linear infinite;
}
.star:nth-child(160) {
top: calc(50%);
left: calc(50%);
transform: translate(73.5px, 113px) translateZ(-452px);
}
.star:nth-child(160) .slide {
-webkit-animation: fade 5000ms -35709ms linear infinite, slide 5000ms -35709ms linear infinite;
animation: fade 5000ms -35709ms linear infinite, slide 5000ms -35709ms linear infinite;
}
.star:nth-child(161) {
top: calc(50%);
left: calc(50%);
transform: translate(138px, -198px) translateZ(-186px);
}
.star:nth-child(161) .slide {
-webkit-animation: fade 5000ms -9464ms linear infinite, slide 5000ms -9464ms linear infinite;
animation: fade 5000ms -9464ms linear infinite, slide 5000ms -9464ms linear infinite;
}
.star:nth-child(162) {
top: calc(50%);
left: calc(50%);
transform: translate(-59px, 64.5px) translateZ(-210px);
}
.star:nth-child(162) .slide {
-webkit-animation: fade 5000ms -12780ms linear infinite, slide 5000ms -12780ms linear infinite;
animation: fade 5000ms -12780ms linear infinite, slide 5000ms -12780ms linear infinite;
}
.star:nth-child(163) {
top: calc(50%);
left: calc(50%);
transform: translate(-78.5px, 19px) translateZ(-235px);
}
.star:nth-child(163) .slide {
-webkit-animation: fade 5000ms -38361ms linear infinite, slide 5000ms -38361ms linear infinite;
animation: fade 5000ms -38361ms linear infinite, slide 5000ms -38361ms linear infinite;
}
.star:nth-child(164) {
top: calc(50%);
left: calc(50%);
transform: translate(-10.5px, -53.5px) translateZ(-304px);
}
.star:nth-child(164) .slide {
-webkit-animation: fade 5000ms -8000ms linear infinite, slide 5000ms -8000ms linear infinite;
animation: fade 5000ms -8000ms linear infinite, slide 5000ms -8000ms linear infinite;
}
.star:nth-child(165) {
top: calc(50%);
left: calc(50%);
transform: translate(165px, 81.5px) translateZ(-62px);
}
.star:nth-child(165) .slide {
-webkit-animation: fade 5000ms -7470ms linear infinite, slide 5000ms -7470ms linear infinite;
animation: fade 5000ms -7470ms linear infinite, slide 5000ms -7470ms linear infinite;
}
.star:nth-child(166) {
top: calc(50%);
left: calc(50%);
transform: translate(-40px, 30px) translateZ(-319px);
}
.star:nth-child(166) .slide {
-webkit-animation: fade 5000ms -12231ms linear infinite, slide 5000ms -12231ms linear infinite;
animation: fade 5000ms -12231ms linear infinite, slide 5000ms -12231ms linear infinite;
}
.star:nth-child(167) {
top: calc(50%);
left: calc(50%);
transform: translate(186px, 57px) translateZ(-295px);
}
.star:nth-child(167) .slide {
-webkit-animation: fade 5000ms -8912ms linear infinite, slide 5000ms -8912ms linear infinite;
animation: fade 5000ms -8912ms linear infinite, slide 5000ms -8912ms linear infinite;
}
.star:nth-child(168) {
top: calc(50%);
left: calc(50%);
transform: translate(-53px, 4.5px) translateZ(-145px);.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0