恒星绕太阳转css,CSS3 宇宙/恒星/小行星动画
CSS
语言：
CSSSCSS
确定
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: #111117;
}
.universe {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.galaxy {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-animation: rotation 120s linear infinite;
animation: rotation 120s linear infinite;
}
.star {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.star:not(.is-sun),
.star:not(.is-sun)::before {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.8);
}
.star:not(.is-sun)::before {
content: "";
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.star.is-sun {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 0 0 50px #ffe696;
background-color: #fff;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: pulse 3s linear infinite alternate;
animation: pulse 3s linear infinite alternate;
}
.star:not(.is-sun):nth-child(1) {
-webkit-transform: translate3d(123px, 455px, 532px);
transform: translate3d(123px, 455px, 532px);
}
.star:not(.is-sun):nth-child(2) {
-webkit-transform: translate3d(700px, 613px, 158px);
transform: translate3d(700px, 613px, 158px);
}
.star:not(.is-sun):nth-child(3) {
-webkit-transform: translate3d(-222px, 602px, -555px);
transform: translate3d(-222px, 602px, -555px);
}
.star:not(.is-sun):nth-child(4) {
-webkit-transform: translate3d(-604px, -784px, -756px);
transform: translate3d(-604px, -784px, -756px);
}
.star:not(.is-sun):nth-child(5) {
-webkit-transform: translate3d(647px, -376px, -51px);
transform: translate3d(647px, -376px, -51px);
}
.star:not(.is-sun):nth-child(6) {
-webkit-transform: translate3d(-256px, 582px, -603px);
transform: translate3d(-256px, 582px, -603px);
}
.star:not(.is-sun):nth-child(7) {
-webkit-transform: translate3d(-53px, 636px, -442px);
transform: translate3d(-53px, 636px, -442px);
}
.star:not(.is-sun):nth-child(8) {
-webkit-transform: translate3d(-113px, -115px, 718px);
transform: translate3d(-113px, -115px, 718px);
}
.star:not(.is-sun):nth-child(9) {
-webkit-transform: translate3d(-127px, -299px, 647px);
transform: translate3d(-127px, -299px, 647px);
}
.star:not(.is-sun):nth-child(10) {
-webkit-transform: translate3d(636px, 49px, 315px);
transform: translate3d(636px, 49px, 315px);
}
.star:not(.is-sun):nth-child(11) {
-webkit-transform: translate3d(-751px, -656px, 789px);
transform: translate3d(-751px, -656px, 789px);
}
.star:not(.is-sun):nth-child(12) {
-webkit-transform: translate3d(667px, 154px, -103px);
transform: translate3d(667px, 154px, -103px);
}
.star:not(.is-sun):nth-child(13) {
-webkit-transform: translate3d(-461px, 41px, 620px);
transform: translate3d(-461px, 41px, 620px);
}
.star:not(.is-sun):nth-child(14) {
-webkit-transform: translate3d(203px, -102px, 611px);
transform: translate3d(203px, -102px, 611px);
}
.star:not(.is-sun):nth-child(15) {
-webkit-transform: translate3d(-785px, 488px, -396px);
transform: translate3d(-785px, 488px, -396px);
}
.star:not(.is-sun):nth-child(16) {
-webkit-transform: translate3d(-71px, 444px, -217px);
transform: translate3d(-71px, 444px, -217px);
}
.star:not(.is-sun):nth-child(17) {
-webkit-transform: translate3d(369px, -1px, -207px);
transform: translate3d(369px, -1px, -207px);
}
.star:not(.is-sun):nth-child(18) {
-webkit-transform: translate3d(140px, 774px, -549px);
transform: translate3d(140px, 774px, -549px);
}
.star:not(.is-sun):nth-child(19) {
-webkit-transform: translate3d(162px, 464px, -47px);
transform: translate3d(162px, 464px, -47px);
}
.star:not(.is-sun):nth-child(20) {
-webkit-transform: translate3d(-74px, -772px, -273px);
transform: translate3d(-74px, -772px, -273px);
}
.star:not(.is-sun):nth-child(21) {
-webkit-transform: translate3d(-437px, -325px, -126px);
transform: translate3d(-437px, -325px, -126px);
}
.star:not(.is-sun):nth-child(22) {
-webkit-transform: translate3d(-440px, 430px, 262px);
transform: translate3d(-440px, 430px, 262px);
}
.star:not(.is-sun):nth-child(23) {
-webkit-transform: translate3d(338px, -657px, -518px);
transform: translate3d(338px, -657px, -518px);
}
.star:not(.is-sun):nth-child(24) {
-webkit-transform: translate3d(115px, 496px, 436px);
transform: translate3d(115px, 496px, 436px);
}
.star:not(.is-sun):nth-child(25) {
-webkit-transform: translate3d(-229px, -162px, -443px);
transform: translate3d(-229px, -162px, -443px);
}
.star:not(.is-sun):nth-child(26) {
-webkit-transform: translate3d(-16px, -64px, -22px);
transform: translate3d(-16px, -64px, -22px);
}
.star:not(.is-sun):nth-child(27) {
-webkit-transform: translate3d(745px, 587px, -657px);
transform: translate3d(745px, 587px, -657px);
}
.star:not(.is-sun):nth-child(28) {
-webkit-transform: translate3d(-792px, 566px, 671px);
transform: translate3d(-792px, 566px, 671px);
}
.star:not(.is-sun):nth-child(29) {
-webkit-transform: translate3d(632px, 320px, -521px);
transform: translate3d(632px, 320px, -521px);
}
.star:not(.is-sun):nth-child(30) {
-webkit-transform: translate3d(324px, -520px, 301px);
transform: translate3d(324px, -520px, 301px);
}
.star:not(.is-sun):nth-child(31) {
-webkit-transform: translate3d(616px, -300px, 582px);
transform: translate3d(616px, -300px, 582px);
}
.star:not(.is-sun):nth-child(32) {
-webkit-transform: translate3d(43px, 370px, -5px);
transform: translate3d(43px, 370px, -5px);
}
.star:not(.is-sun):nth-child(33) {
-webkit-transform: translate3d(272px, 437px, -342px);
transform: translate3d(272px, 437px, -342px);
}
.star:not(.is-sun):nth-child(34) {
-webkit-transform: translate3d(-1px, 676px, 627px);
transform: translate3d(-1px, 676px, 627px);
}
.star:not(.is-sun):nth-child(35) {
-webkit-transform: translate3d(-180px, 7px, -243px);
transform: translate3d(-180px, 7px, -243px);
}
.star:not(.is-sun):nth-child(36) {
-webkit-transform: translate3d(-83px, 704px, 415px);
transform: translate3d(-83px, 704px, 415px);
}
.star:not(.is-sun):nth-child(37) {
-webkit-transform: translate3d(-127px, 643px, 718px);
transform: translate3d(-127px, 643px, 718px);
}
.star:not(.is-sun):nth-child(38) {
-webkit-transform: translate3d(625px, -95px, 475px);
transform: translate3d(625px, -95px, 475px);
}
.star:not(.is-sun):nth-child(39) {
-webkit-transform: translate3d(224px, -556px, -279px);
transform: translate3d(224px, -556px, -279px);
}
.star:not(.is-sun):nth-child(40) {
-webkit-transform: translate3d(656px, -184px, 45px);
transform: translate3d(656px, -184px, 45px);
}
.star:not(.is-sun):nth-child(41) {
-webkit-transform: translate3d(208px, 563px, -185px);
transform: translate3d(208px, 563px, -185px);
}
.star:not(.is-sun):nth-child(42) {
-webkit-transform: translate3d(-798px, -10px, 421px);
transform: translate3d(-798px, -10px, 421px);
}
.star:not(.is-sun):nth-child(43) {
-webkit-transform: translate3d(413px, 280px, -230px);
transform: translate3d(413px, 280px, -230px);
}
.star:not(.is-sun):nth-child(44) {
-webkit-transform: translate3d(-101px, 434px, 392px);
transform: translate3d(-101px, 434px, 392px);
}
.star:not(.is-sun):nth-child(45) {
-webkit-transform: translate3d(344px, 278px, 178px);
transform: translate3d(344px, 278px, 178px);
}
.star:not(.is-sun):nth-child(46) {
-webkit-transform: translate3d(-784px, 792px, -660px);
transform: translate3d(-784px, 792px, -660px);
}
.star:not(.is-sun):nth-child(47) {
-webkit-transform: translate3d(-430px, 674px, 183px);
transform: translate3d(-430px, 674px, 183px);
}
.star:not(.is-sun):nth-child(48) {
-webkit-transform: translate3d(36px, -664px, 566px);
transform: translate3d(36px, -664px, 566px);
}
.star:not(.is-sun):nth-child(49) {
-webkit-transform: translate3d(783px, 683px, -655px);
transform: translate3d(783px, 683px, -655px);
}
.star:not(.is-sun):nth-child(50) {
-webkit-transform: translate3d(-517px, 177px, -722px);
transform: translate3d(-517px, 177px, -722px);
}
.star:not(.is-sun):nth-child(51) {
-webkit-transform: translate3d(-76px, -607px, -61px);
transform: translate3d(-76px, -607px, -61px);
}
.star:not(.is-sun):nth-child(52) {
-webkit-transform: translate3d(277px, -162px, -689px);
transform: translate3d(277px, -162px, -689px);
}
.star:not(.is-sun):nth-child(53) {
-webkit-transform: translate3d(630px, -411px, -512px);
transform: translate3d(630px, -411px, -512px);
}
.star:not(.is-sun):nth-child(54) {
-webkit-transform: translate3d(595px, 20px, -598px);
transform: translate3d(595px, 20px, -598px);
}
.star:not(.is-sun):nth-child(55) {
-webkit-transform: translate3d(100px, -521px, -595px);
transform: translate3d(100px, -521px, -595px);
}
.star:not(.is-sun):nth-child(56) {
-webkit-transform: translate3d(100px, -262px, 424px);
transform: translate3d(100px, -262px, 424px);
}
.star:not(.is-sun):nth-child(57) {
-webkit-transform: translate3d(-378px, -438px, 180px);
transform: translate3d(-378px, -438px, 180px);
}
.star:not(.is-sun):nth-child(58) {
-webkit-transform: translate3d(-737px, 444px, -224px);
transform: translate3d(-737px, 444px, -224px);
}
.star:not(.is-sun):nth-child(59) {
-webkit-transform: translate3d(278px, 594px, -453px);
transform: translate3d(278px, 594px, -453px);
}
.star:not(.is-sun):nth-child(60) {
-webkit-transform: translate3d(377px, -490px, 530px);
transform: translate3d(377px, -490px, 530px);
}
.star:not(.is-sun):nth-child(61) {
-webkit-transform: translate3d(-213px, -436px, 434px);
transform: translate3d(-213px, -436px, 434px);
}
.star:not(.is-sun):nth-child(62) {
-webkit-transform: translate3d(776px, 733px, 574px);
transform: translate3d(776px, 733px, 574px);
}
.star:not(.is-sun):nth-child(63) {
-webkit-transform: translate3d(663px, 522px, -606px);
transform: translate3d(663px, 522px, -606px);
}
.star:not(.is-sun):nth-child(64) {
-webkit-transform: translate3d(-160px, -485px, 14px);
transform: translate3d(-160px, -485px, 14px);
}
.star:not(.is-sun):nth-child(65) {
-webkit-transform: translate3d(-364px, 263px, -598px);
transform: translate3d(-364px, 263px, -598px);
}
.star:not(.is-sun):nth-child(66) {
-webkit-transform: translate3d(-685px, 723px, -366px);
transform: translate3d(-685px, 723px, -366px);
}
.star:not(.is-sun):nth-child(67) {
-webkit-transform: translate3d(656px, 448px, 783px);
transform: translate3d(656px, 448px, 783px);
}
.star:not(.is-sun):nth-child(68) {
-webkit-transform: translate3d(-489px, -74px, -654px);
transform: translate3d(-489px, -74px, -654px);
}
.star:not(.is-sun):nth-child(69) {
-webkit-transform: translate3d(-271px, -583px, 319px);
transform: translate3d(-271px, -583px, 319px);
}
.star:not(.is-sun):nth-child(70) {
-webkit-transform: translate3d(-180px, 613px, 267px);
transform: translate3d(-180px, 613px, 267px);
}
.star:not(.is-sun):nth-child(71) {
-webkit-transform: translate3d(350px, -792px, 397px);
transform: translate3d(350px, -792px, 397px);
}
.star:not(.is-sun):nth-child(72) {
-webkit-transform: translate3d(-99px, -608px, -106px);
transform: translate3d(-99px, -608px, -106px);
}
.star:not(.is-sun):nth-child(73) {
-webkit-transform: translate3d(428px, -498px, 669px);
transform: translate3d(428px, -498px, 669px);
}
.star:not(.is-sun):nth-child(74) {
-webkit-transform: translate3d(-520px, 361px, 508px);
transform: translate3d(-520px, 361px, 508px);
}
.star:not(.is-sun):nth-child(75) {
-webkit-transform: translate3d(215px, 710px, -159px);
transform: translate3d(215px, 710px, -159px);
}
.star:not(.is-sun):nth-child(76) {
-webkit-transform: translate3d(60px, -221px, 395px);
transform: translate3d(60px, -221px, 395px);
}
.star:not(.is-sun):nth-child(77) {
-webkit-transform: translate3d(-192px, 667px, 222px);
transform: translate3d(-192px, 667px, 222px);
}
.star:not(.is-sun):nth-child(78) {
-webkit-transform: translate3d(-414px, -136px, -793px);
transform: translate3d(-414px, -136px, -793px);
}
.star:not(.is-sun):nth-child(79) {
-webkit-transform: translate3d(-409px, -312px, -722px);
transform: translate3d(-409px, -312px, -722px);
}
.star:not(.is-sun):nth-child(80) {
-webkit-transform: translate3d(25px, -26px, -379px);
transform: translate3d(25px, -26px, -379px);
}
.star:not(.is-sun):nth-child(81) {
-webkit-transform: translate3d(-495px, 273px, 293px);
transform: translate3d(-495px, 273px, 293px);
}
.star:not(.is-sun):nth-child(82) {
-webkit-transform: translate3d(771px, -697px, 547px);
transform: translate3d(771px, -697px, 547px);
}
.star:not(.is-sun):nth-child(83) {
-webkit-transform: translate3d(-111px, -152px, -380px);
transform: translate3d(-111px, -152px, -380px);
}
.star:not(.is-sun):nth-child(84) {
-webkit-transform: translate3d(-759px, -214px, 561px);
transform: translate3d(-759px, -214px, 561px);
}
.star:not(.is-sun):nth-child(85) {
-webkit-transform: translate3d(-484px, 455px, -192px);
transform: translate3d(-484px, 455px, -192px);
}
.star:not(.is-sun):nth-child(86) {
-webkit-transform: translate3d(110px, -535px, 321px);
transform: translate3d(110px, -535px, 321px);
}
.star:not(.is-sun):nth-child(87) {
-webkit-transform: translate3d(634px, 776px, -282px);
transform: translate3d(634px, 776px, -282px);
}
.star:not(.is-sun):nth-child(88) {
-webkit-transform: translate3d(-220px, 430px, -659px);
transform: translate3d(-220px, 430px, -659px);
}
.star:not(.is-sun):nth-child(89) {
-webkit-transform: translate3d(611px, 682px, 476px);
transform: translate3d(611px, 682px, 476px);
}
.star:not(.is-sun):nth-child(90) {
-webkit-transform: translate3d(-465px, -604px, -687px);
transform: translate3d(-465px, -604px, -687px);
}
.star:not(.is-sun):nth-child(91) {
-webkit-transform: translate3d(-409px, -200px, -158px);
transform: translate3d(-409px, -200px, -158px);
}
.star:not(.is-sun):nth-child(92) {
-webkit-transform: translate3d(-608px, 414px, 409px);
transform: translate3d(-608px, 414px, 409px);
}
.star:not(.is-sun):nth-child(93) {
-webkit-transform: translate3d(794px, -98px, -202px);
transform: translate3d(794px, -98px, -202px);
}
.star:not(.is-sun):nth-child(94) {
-webkit-transform: translate3d(-410px, 177px, -608px);
transform: translate3d(-410px, 177px, -608px);
}
.star:not(.is-sun):nth-child(95) {
-webkit-transform: translate3d(-715px, 728px, -704px);
transform: translate3d(-715px, 728px, -704px);
}
.star:not(.is-sun):nth-child(96) {
-webkit-transform: translate3d(-366px, -199px, 738px);
transform: translate3d(-366px, -199px, 738px);
}
.star:not(.is-sun):nth-child(97) {
-webkit-transform: translate3d(-260px, 382px, 28px);
transform: translate3d(-260px, 382px, 28px);
}
.star:not(.is-sun):nth-child(98) {
-webkit-transform: translate3d(538px, -70px, 681px);
transform: translate3d(538px, -70px, 681px);
}
.star:not(.is-sun):nth-child(99) {
-webkit-transform: translate3d(85px, 180px, -428px);
transform: translate3d(85px, 180px, -428px);
}
.star:not(.is-sun):nth-child(100) {
-webkit-transform: translate3d(8px, -561px, 274px);
transform: translate3d(8px, -561px, 274px);
}
.star:not(.is-sun):nth-child(101) {
-webkit-transform: translate3d(489px, 30px, -640px);
transform: translate3d(489px, 30px, -640px);
}
.star:not(.is-sun):nth-child(102) {
-webkit-transform: translate3d(416px, -126px, -550px);
transform: translate3d(416px, -126px, -550px);
}
.star:not(.is-sun):nth-child(103) {
-webkit-transform: translate3d(639px, -694px, -213px);
transform: translate3d(639px, -694px, -213px);
}
.star:not(.is-sun):nth-child(104) {
-webkit-transform: translate3d(-487px, 778px, -626px);
transform: translate3d(-487px, 778px, -626px);
}
.star:not(.is-sun):nth-child(105) {
-webkit-transform: translate3d(-277px, -767px, 588px);
transform: translate3d(-277px, -767px, 588px);
}
.star:not(.is-sun):nth-child(106) {
-webkit-transform: translate3d(725px, 60px, -581px);
transform: translate3d(725px, 60px, -581px);
}
.star:not(.is-sun):nth-child(107) {
-webkit-transform: translate3d(-638px, -505px, 206px);
transform: translate3d(-638px, -505px, 206px);
}
.star:not(.is-sun):nth-child(108) {
-webkit-transform: translate3d(384px, 481px, 476px);
transform: translate3d(384px, 481px, 476px);
}
.star:not(.is-sun):nth-child(109) {
-webkit-transform: translate3d(349px, 280px, -762px);
transform: translate3d(349px, 280px, -762px);
}
.star:not(.is-sun):nth-child(110) {
-webkit-transform: translate3d(-123px, -123px, -59px);
transform: translate3d(-123px, -123px, -59px);
}
.star:not(.is-sun):nth-child(111) {
-webkit-transform: translate3d(365px, 6px, 503px);
transform: translate3d(365px, 6px, 503px);
}
.star:not(.is-sun):nth-child(112) {
-webkit-transform: translate3d(-577px, 783px, -614px);
transform: translate3d(-577px, 783px, -614px);
}
.star:not(.is-sun):nth-child(113) {
-webkit-transform: translate3d(64px, -127px, -320px);
transform: translate3d(64px, -127px, -320px);
}
.star:not(.is-sun):nth-child(114) {
-webkit-transform: translate3d(-9px, -203px, -720px);
transform: translate3d(-9px, -203px, -720px);
}
.star:not(.is-sun):nth-child(115) {
-webkit-transform: translate3d(-245px, -596px, -557px);
transform: translate3d(-245px, -596px, -557px);
}
.star:not(.is-sun):nth-child(116) {
-webkit-transform: translate3d(393px, -738px, 628px);
transform: translate3d(393px, -738px, 628px);
}
.star:not(.is-sun):nth-child(117) {
-webkit-transform: translate3d(633px, 170px, -362px);
transform: translate3d(633px, 170px, -362px);
}
.star:not(.is-sun):nth-child(118) {
-webkit-transform: translate3d(-332px, 488px, -220px);
transform: translate3d(-332px, 488px, -220px);
}
.star:not(.is-sun):nth-child(119) {
-webkit-transform: translate3d(236px, -347px, 334px);
transform: translate3d(236px, -347px, 334px);
}
.star:not(.is-sun):nth-child(120) {
-webkit-transform: translate3d(48px, -30px, 291px);
transform: translate3d(48px, -30px, 291px);
}
.star:not(.is-sun):nth-child(121) {
-webkit-transform: translate3d(321px, -673px, -800px);
transform: translate3d(321px, -673px, -800px);
}
.star:not(.is-sun):nth-child(122) {
-webkit-transform: translate3d(250px, -12px, 462px);
transform: translate3d(250px, -12px, 462px);
}
.star:not(.is-sun):nth-child(123) {
-webkit-transform: translate3d(490px, -191px, -361px);
transform: translate3d(490px, -191px, -361px);
}
.star:not(.is-sun):nth-child(124) {
-webkit-transform: translate3d(-368px, 730px, 551px);
transform: translate3d(-368px, 730px, 551px);
}
.star:not(.is-sun):nth-child(125) {
-webkit-transform: translate3d(-453px, -568px, -536px);
transform: translate3d(-453px, -568px, -536px);
}
.star:not(.is-sun):nth-child(126) {
-webkit-transform: translate3d(428px, 748px, -545px);
transform: translate3d(428px, 748px, -545px);
}
.star:not(.is-sun):nth-child(127) {
-webkit-transform: translate3d(-697px, 631px, 24px);
transform: translate3d(-697px, 631px, 24px);
}
.star:not(.is-sun):nth-child(128) {
-webkit-transform: translate3d(-650px, -160px, -428px);
transform: translate3d(-650px, -160px, -428px);
}
.star:not(.is-sun):nth-child(129) {
-webkit-transform: translate3d(179px, -345px, -283px);
transform: translate3d(179px, -345px, -283px);
}
.star:not(.is-sun):nth-child(130) {
-webkit-transform: translate3d(213px, -347px, -246px);
transform: translate3d(213px, -347px, -246px);
}
.star:not(.is-sun):nth-child(131) {
-webkit-transform: translate3d(-778px, -354px, 279px);
transform: translate3d(-778px, -354px, 279px);
}
.star:not(.is-sun):nth-child(132) {
-webkit-transform: translate3d(9px, -418px, -693px);
transform: translate3d(9px, -418px, -693px);
}
.star:not(.is-sun):nth-child(133) {
-webkit-transform: translate3d(-44px, 585px, 562px);
transform: translate3d(-44px, 585px, 562px);
}
.star:not(.is-sun):nth-child(134) {
-webkit-transform: translate3d(-265px, -607px, 75px);
transform: translate3d(-265px, -607px, 75px);
}
.star:not(.is-sun):nth-child(135) {
-webkit-transform: translate3d(106px, -717px, -315px);
transform: translate3d(106px, -717px, -315px);
}
.star:not(.is-sun):nth-child(136) {
-webkit-transform: translate3d(-390px, 622px, -184px);
transform: translate3d(-390px, 622px, -184px);
}
.star:not(.is-sun):nth-child(137) {
-webkit-transform: translate3d(175px, -381px, -181px);
transform: translate3d(175px, -381px, -181px);
}
.star:not(.is-sun):nth-child(138) {
-webkit-transform: translate3d(-286px, 725px, -446px);
transform: translate3d(-286px, 725px, -446px);
}
.star:not(.is-sun):nth-child(139) {
-webkit-transform: translate3d(-713px, 477px, 246px);
transform: translate3d(-713px, 477px, 246px);
}
.star:not(.is-sun):nth-child(140) {
-webkit-transform: translate3d(-302px, -44px, 302px);
transform: translate3d(-302px, -44px, 302px);
}
.star:not(.is-sun):nth-child(141) {
-webkit-transform: translate3d(-288px, 386px, 574px);
transform: translate3d(-288px, 386px, 574px);
}
.star:not(.is-sun):nth-child(142) {
-webkit-transform: translate3d(468px, -419px, 544px);
transform: translate3d(468px, -419px, 544px);
}
.star:not(.is-sun):nth-child(143) {
-webkit-transform: translate3d(-189px, 268px, -235px);
transform: translate3d(-189px, 268px, -235px);
}
.star:not(.is-sun):nth-child(144) {
-webkit-transform: translate3d(187px, -403px, -169px);
transform: translate3d(187px, -403px, -169px);
}
.star:not(.is-sun):nth-child(145) {
-webkit-transform: translate3d(670px, -449px, 154px);
transform: translate3d(670px, -449px, 154px);
}
.star:not(.is-sun):nth-child(146) {
-webkit-transform: translate3d(118px, -458px, -586px);
transform: translate3d(118px, -458px, -586px);
}
.star:not(.is-sun):nth-child(147) {
-webkit-transform: translate3d(270px, 576px, -271px);
transform: translate3d(270px, 576px, -271px);
}
.star:not(.is-sun):nth-child(148) {
-webkit-transform: translate3d(391px, -207px, -668px);
transform: translate3d(391px, -207px, -668px);
}
.star:not(.is-sun):nth-child(149) {
-webkit-transform: translate3d(-526px, 277px, 418px);
transform: translate3d(-526px, 277px, 418px);
}
.star:not(.is-sun):nth-child(150) {
-webkit-transform: translate3d(680px, -508px, 464px);
transform: translate3d(680px, -508px, 464px);
}
.star:not(.is-sun):nth-child(151) {
-webkit-transform: translate3d(223px, -276px, 433px);
transform: translate3d(223px, -276px, 433px);
}
.star:not(.is-sun):nth-child(152) {
-webkit-transform: translate3d(-748px, 473px, -461px);
transform: translate3d(-748px, 473px, -461px);
}
.star:not(.is-sun):nth-child(153) {
-webkit-transform: translate3d(160px, -238px, -162px);
transform: translate3d(160px, -238px, -162px);
}
.star:not(.is-sun):nth-child(154) {
-webkit-transform: translate3d(-652px, 669px, 649px);
transform: translate3d(-652px, 669px, 649px);
}
.star:not(.is-sun):nth-child(155) {
-webkit-transform: translate3d(-688px, 625px, -133px);
transform: translate3d(-688px, 625px, -133px);
}
.star:not(.is-sun):nth-child(156) {
-webkit-transform: translate3d(424px, -794px, 704px);
transform: translate3d(424px, -794px, 704px);
}
.star:not(.is-sun):nth-child(157) {
-webkit-transform: translate3d(337px, 553px, 322px);
transform: translate3d(337px, 553px, 322px);
}
.star:not(.is-sun):nth-child(158) {
-webkit-transform: translate3d(-662px, 614px, -422px);
transform: translate3d(-662px, 614px, -422px);
}
.star:not(.is-sun):nth-child(159) {
-webkit-transform: translate3d(297px, -377px, 391px);
transform: translate3d(297px, -377px, 391px);
}
.star:not(.is-sun):nth-child(160) {
-webkit-transform: translate3d(-722px, -696px, -647px);
transform: translate3d(-722px, -696px, -647px);
}
.star:not(.is-sun):nth-child(161) {
-webkit-transform: translate3d(61px, 52px, -326px);
transform: translate3d(61px, 52px, -326px);
}
.star:not(.is-sun):nth-child(162) {
-webkit-transform: translate3d(-206px, -714px, 783px);
transform: translate3d(-206px, -714px, 783px);
}
.star:not(.is-sun):nth-child(163) {
-webkit-transform: translate3d(326px, -234px, -130px);
transform: translate3d(326px, -234px, -130px);
}
.star:not(.is-sun):nth-child(164) {
-webkit-transform: translate3d(700px, -112px, -733px);
transform: translate3d(700px, -112px, -733px);
}
.star:not(.is-sun):nth-child(165) {
-webkit-transform: translate3d(246px, 576px, -738px);
transform: translate3d(246px, 576px, -738px);
}
.star:not(.is-sun):nth-child(166) {
-webkit-transform: translate3d(71px, 85px, -606px);
transform: translate3d(71px, 85px, -606px);
}
.star:not(.is-sun):nth-child(167) {
-webkit-transform: translate3d(26px, 732px, -601px);
transform: translate3d(26px, 732px, -601px);
}
.star:not(.is-sun):nth-child(168) {
-webkit-transform: translate3d(-300px, 496px, 48px);
transform: translate3d(-300px, 496px, 48px);
}
.star:not(.is-sun):nth-child(169) {
-webkit-transform: translate3d(106px, 227px, -125px);
transform: translate3d(106px, 227px, -125px);
}
.star:not(.is-sun):nth-child(170) {
-webkit-transform: translate3d(-373px, -164px, 609px);
transform: translate3d(-373px, -164px, 609px);
}
.star:not(.is-sun):nth-child(171) {
-webkit-transform: translate3d(-621px, -591px, -274px);
transform: translate3d(-621px, -591px, -274px);
}
.star:not(.is-sun):nth-child(172) {
-webkit-transform: translate3d(-115px, 19px, 673px);
transform: translate3d(-115px, 19px, 673px);
}
.star:not(.is-sun):nth-child(173) {
-webkit-transform: translate3d(147px, 301px, -426px);
transform: translate3d(147px, 301px, -426px);
}
.star:not(.is-sun):nth-child(174) {
-webkit-transform: translate3d(695px, -278px, 352px);
transform: translate3d(695px, -278px, 352px);
}
.star:not(.is-sun):nth-child(175) {
-webkit-transform: translate3d(752px, -178px, -105px);
transform: translate3d(752px, -178px, -105px);
}
.star:not(.is-sun):nth-child(176) {
-webkit-transform: translate3d(641px, 226px, -11px);
transform: translate3d(641px, 226px, -11px);
}
.star:not(.is-sun):nth-child(177) {
-webkit-transform: translate3d(-490px, 51px, 68px);
transform: translate3d(-490px, 51px, 68px);
}
.star:not(.is-sun):nth-child(178) {
-webkit-transform: translate3d(-508px, -134px, -715px);
transform: translate3d(-508px, -134px, -715px);
}
.star:not(.is-sun):nth-child(179) {
-webkit-transform: translate3d(195px, 108px, 149px);
transform: translate3d(195px, 108px, 149px);
}
.star:not(.is-sun):nth-child(180) {
-webkit-transform: translate3d(-200px, -298px, -415px);
transform: translate3d(-200px, -298px, -415px);
}
.star:not(.is-sun):nth-child(181) {
-webkit-transform: translate3d(791px, 78px, -764px);
transform: translate3d(791px, 78px, -764px);
}
.star:not(.is-sun):nth-child(182) {
-webkit-transform: translate3d(512px, 603px, 516px);
transform: translate3d(512px, 603px, 516px);
}
.star:not(.is-sun):nth-child(183) {
-webkit-transform: translate3d(-393px, 19px, -336px);
transform: translate3d(-393px, 19px, -336px);
}
.star:not(.is-sun):nth-child(184) {
-webkit-transform: translate3d(786px, 510px, -343px);
transform: translate3d(786px, 510px, -343px);
}
.star:not(.is-sun):nth-child(185) {
-webkit-transform: translate3d(34px, 671px, 463px);
transform: translate3d(34px, 671px, 463px);
}
.star:not(.is-sun):nth-child(186) {
-webkit-transform: translate3d(-338px, -100px, -215px);
transform: translate3d(-338px, -100px, -215px);
}
.star:not(.is-sun):nth-child(187) {
-webkit-transform: translate3d(110px, -1px, 693px);
transform: translate3d(110px, -1px, 693px);
}
.star:not(.is-sun):nth-child(188) {
-webkit-transform: translate3d(-507px, -344px, -748px);
transform: translate3d(-507px, -344px, -748px);
}
.star:not(.is-sun):nth-child(189) {
-webkit-transform: translate3d(-756px, -624px, -739px);
transform: translate3d(-756px, -624px, -739px);
}
.star:not(.is-sun):nth-child(190) {
-webkit-transform: translate3d(-736px, -322px, -662px);
transform: translate3d(-736px, -322px, -662px);
}
.star:not(.is-sun):nth-child(191) {
-webkit-transform: translate3d(-381px, -585px, 112px);
transform: translate3d(-381px, -585px, 112px);
}
.star:not(.is-sun):nth-child(192) {
-webkit-transform: translate3d(-683px, 428px, 627px);
transform: translate3d(-683px, 428px, 627px);
}
.star:not(.is-sun):nth-child(193) {
-webkit-transform: translate3d(401px, -27px, -567px);
transform: translate3d(401px, -27px, -567px);
}
.star:not(.is-sun):nth-child(194) {
-webkit-transform: translate3d(-42px, -65px, 321px);
transform: translate3d(-42px, -65px, 321px);
}
.star:not(.is-sun):nth-child(195) {
-webkit-transform: translate3d(51px, 629px, -749px);
transform: translate3d(51px, 629px, -749px);
}
.star:not(.is-sun):nth-child(196) {
-webkit-transform: translate3d(-454px, 14px, -408px);
transform: translate3d(-454px, 14px, -408px);
}
.star:not(.is-sun):nth-child(197) {
-webkit-transform: translate3d(-566px, 161px, 718px);
transform: translate3d(-566px, 161px, 718px);
}
.star:not(.is-sun):nth-child(198) {
-webkit-transform: translate3d(797px, 559px, 757px);
transform: translate3d(797px, 559px, 757px);
}
.star:not(.is-sun):nth-child(199) {
-webkit-transform: translate3d(362px, -12px, -71px);
transform: translate3d(362px, -12px, -71px);
}
.star:not(.is-sun):nth-child(200) {
-webkit-transform: translate3d(-141px, -428px, 442px);
transform: translate3d(-141px, -428px, 442px);
}
.star:not(.is-sun):nth-child(201) {
-webkit-transform: translate3d(285px, 355px, -515px);
transform: translate3d(285px, 355px, -515px);
}
.star:not(.is-sun):nth-child(202) {
-webkit-transform: translate3d(-237px, 471px, -334px);
transform: translate3d(-237px, 471px, -334px);
}
.star:not(.is-sun):nth-child(203) {
-webkit-transform: translate3d(412px, -11px, 735px);
transform: translate3d(412px, -11px, 735px);
}
.star:not(.is-sun):nth-child(204) {
-webkit-transform: translate3d(-371px, 774px, 331px);
transform: translate3d(-371px, 774px, 331px);
}
.star:not(.is-sun):nth-child(205) {
-webkit-transform: translate3d(110px, 368px, -54px);
transform: translate3d(110px, 368px, -54px);
}
.star:not(.is-sun):nth-child(206) {
-webkit-transform: translate3d(476px, 144px, -541px);
transform: translate3d(476px, 144px, -541px);
}
.star:not(.is-sun):nth-child(207) {
-webkit-transform: translate3d(-69px, 372px, 93px);
transform: translate3d(-69px, 372px, 93px);
}
.star:not(.is-sun):nth-child(208) {
-webkit-transform: translate3d(-287px, -546px, 15px);
transform: translate3d(-287px, -546px, 15px);
}
.star:not(.is-sun):nth-child(209) {
-webkit-transform: translate3d(-297px, 763px, 465px);
transform: translate3d(-297px, 763px, 465px);
}
.star:not(.is-sun):nth-child(210) {
-webkit-transform: translate3d(-783px, 500px, -449px);
transform: translate3d(-783px, 500px, -449px);
}
.star:not(.is-sun):nth-child(211) {
-webkit-transform: translate3d(111px, 517px, -716px);
transform: translate3d(111px, 517px, -716px);
}
.star:not(.is-sun):nth-child(212) {
-webkit-transform: translate3d(-237px, -646px, -500px);
transform: translate3d(-237px, -646px, -500px);
}
.star:not(.is-sun):nth-child(213) {
-webkit-transform: translate3d(-707px, -675px, -509px);
transform: translate3d(-707px, -675px, -509px);
}
.star:not(.is-sun):nth-child(214) {
-webkit-transform: translate3d(408px, -778px, 71px);
transform: translate3d(408px, -778px, 71px);
}
.star:not(.is-sun):nth-child(215) {
-webkit-transform: translate3d(-676px, 341px, -225px);
transform: translate3d(-676px, 341px, -225px);
}
.star:not(.is-sun):nth-child(216) {
-webkit-transform: translate3d(-456px, -219px, -772px);
transform: translate3d(-456px, -219px, -772px);
}
.star:not(.is-sun):nth-child(217) {
-webkit-transform: translate3d(18px, 427px, -275px);
transform: translate3d(18px, 427px, -275px);
}
.star:not(.is-sun):nth-child(218) {
-webkit-transform: translate3d(-100px, -427px, -159px);
transform: translate3d(-100px, -427px, -159px);
}
.star:not(.is-sun):nth-child(219) {
-webkit-transform: translate3d(-329px, 785px, -93px);
transform: translate3d(-329px, 785px, -93px);
}
.star:not(.is-sun):nth-child(220) {
-webkit-transform: translate3d(310px, 213px, -413px);
transform: translate3d(310px, 213px, -413px);
}
.star:not(.is-sun):nth-child(221) {
-webkit-transform: translate3d(658px, -693px, 621px);
transform: translate3d(658px, -693px, 621px);
}
.star:not(.is-sun):nth-child(222) {
-webkit-transform: translate3d(-649px, 166px, -561px);
transform: translate3d(-649px, 166px, -561px);
}
.star:not(.is-sun):nth-child(223) {
-webkit-transform: translate3d(-608px, 314px, 515px);
transform: translate3d(-608px, 314px, 515px);
}
.star:not(.is-sun):nth-child(224) {
-webkit-transform: translate3d(326px, 557px, -189px);
transform: translate3d(326px, 557px, -189px);
}
.star:not(.is-sun):nth-child(225) {
-webkit-transform: translate3d(-472px, -694px, 42px);
transform: translate3d(-472px, -694px, 42px);
}
.star:not(.is-sun):nth-child(226) {
-webkit-transform: translate3d(300px, 681px, -249px);
transform: translate3d(300px, 681px, -249px);
}
.star:not(.is-sun):nth-child(227) {
-webkit-transform: translate3d(101px, -132px, -198px);
transform: translate3d(101px, -132px, -198px);
}
.star:not(.is-sun):nth-child(228) {
-webkit-transform: translate3d(-696px, 359px, -723px);
transform: translate3d(-696px, 359px, -723px);
}
.star:not(.is-sun):nth-child(229) {
-webkit-transform: translate3d(-107px, 613px, 291px);
transform: translate3d(-107px, 613px, 291px);
}
.star:not(.is-sun):nth-child(230) {
-webkit-transform: translate3d(360px, -495px, 307px);
transform: translate3d(360px, -495px, 307px);
}
.star:not(.is-sun):nth-child(231) {
-webkit-transform: translate3d(36px, -475px, -408px);
transform: translate3d(36px, -475px, -408px);
}
.star:not(.is-sun):nth-child(232) {
-webkit-transform: translate3d(-689px, -476px, 571px);
transform: translate3d(-689px, -476px, 571px);
}
.star:not(.is-sun):nth-child(233) {
-webkit-transform: translate3d(468px, 620px, -115px);
transform: translate3d(468px, 620px, -115px);
}
.star:not(.is-sun):nth-child(234) {
-webkit-transform: translate3d(786px, 252px, -631px);
transform: translate3d(786px, 252px, -631px);
}
.star:not(.is-sun):nth-child(235) {
-webkit-transform: translate3d(-481px, 454px, 746px);
transform: translate3d(-481px, 454px, 746px);
}
.star:not(.is-sun):nth-child(236) {
-webkit-transform: translate3d(-723px, 273px, 699px);
transform: translate3d(-723px, 273px, 699px);
}
.star:not(.is-sun):nth-child(237) {
-webkit-transform: translate3d(429px, 35px, -306px);
transform: translate3d(429px, 35px, -306px);
}
.star:not(.is-sun):nth-child(238) {
-webkit-transform: translate3d(-756px, -16px, -24px);
transform: translate3d(-756px, -16px, -24px);
}
.star:not(.is-sun):nth-child(239) {
-webkit-transform: translate3d(735px, -307px, 750px);
transform: translate3d(735px, -307px, 750px);
}
.star:not(.is-sun):nth-child(240) {
-webkit-transform: translate3d(629px, 85px, 346px);
transform: translate3d(629px, 85px, 346px);
}
.star:not(.is-sun):nth-child(241) {
-webkit-transform: translate3d(-258px, -726px, 766px);
transform: translate3d(-258px, -726px, 766px);
}
.star:not(.is-sun):nth-child(242) {
-webkit-transform: translate3d(-799px, 692px, 481px);
transform: translate3d(-799px, 692px, 481px);
}
.star:not(.is-sun):nth-child(243) {
-webkit-transform: translate3d(-201px, -626px, -244px);
transform: translate3d(-201px, -626px, -244px);
}
.star:not(.is-sun):nth-child(244) {
-webkit-transform: translate3d(385px, -564px, -188px);
transform: translate3d(385px, -564px, -188px);
}
.star:not(.is-sun):nth-child(245) {
-webkit-transform: translate3d(-136px, 11px, -164px);
transform: translate3d(-136px, 11px, -164px);
}
.star:not(.is-sun):nth-child(246) {
-webkit-transform: translate3d(552px, -631px, 613px);
transform: translate3d(552px, -631px, 613px);
}
.star:not(.is-sun):nth-child(247) {
-webkit-transform: translate3d(-764px, -698px, -161px);
transform: translate3d(-764px, -698px, -161px);
}
.star:not(.is-sun):nth-child(248) {
-webkit-transform: translate3d(536px, 386px, -608px);
transform: translate3d(536px, 386px, -608px);
}
.star:not(.is-sun):nth-child(249) {
-webkit-transform: translate3d(-736px, 574px, 257px);
transform: translate3d(-736px, 574px, 257px);
}
.star:not(.is-sun):nth-child(250) {
-webkit-transform: translate3d(-409px, 632px, 184px);
transform: translate3d(-409px, 632px, 184px);
}
.star:not(.is-sun):nth-child(251) {
-webkit-transform: translate3d(-702px, -354px, -223px);
transform: translate3d(-702px, -354px, -223px);
}
.star:not(.is-sun):nth-child(252) {
-webkit-transform: translate3d(-252px, -655px, 282px);
transform: translate3d(-252px, -655px, 282px);
}
.star:not(.is-sun):nth-child(253) {
-webkit-transform: translate3d(-148px, -418px, 256px);
transform: translate3d(-148px, -418px, 256px);
}
.star:not(.is-sun):nth-child(254) {
-webkit-transform: translate3d(-31px, -197px, -494px);
transform: translate3d(-31px, -197px, -494px);
}
.star:not(.is-sun):nth-child(255) {
-webkit-transform: translate3d(61px, 711px, 691px);
transform: translate3d(61px, 711px, 691px);
}
.star:not(.is-sun):nth-child(256) {
-webkit-transform: translate3d(-104px, 25px, -237px);
transform: translate3d(-104px, 25px, -237px);
}
.star:not(.is-sun):nth-child(257) {
-webkit-transform: translate3d(501px, -263px, -21px);
transform: translate3d(501px, -263px, -21px);
}
.star:not(.is-sun):nth-child(258) {
-webkit-transform: translate3d(-694px, 536px, 27px);
transform: translate3d(-694px, 536px, 27px);
}
.star:not(.is-sun):nth-child(259) {
-webkit-transform: translate3d(465px, -787px, 377px);
transform: translate3d(465px, -787px, 377px);
}
.star:not(.is-sun):nth-child(260) {
-webkit-transform: translate3d(179px, -566px, 613px);
transform: translate3d(179px, -566px, 613px);
}
.star:not(.is-sun):nth-child(261) {
-webkit-transform: translate3d(-549px, -527px, -753px);
transform: translate3d(-549px, -527px, -753px);
}
.star:not(.is-sun):nth-child(262) {
-webkit-transform: translate3d(539px, 403px, 87px);
transform: translate3d(539px, 403px, 87px);
}
.star:not(.is-sun):nth-child(263) {
-webkit-transform: translate3d(-51px, -486px, 751px);
transform: translate3d(-51px, -486px, 751px);
}
.star:not(.is-sun):nth-child(264) {
-webkit-transform: translate3d(254px, -794px, 558px);
transform: translate3d(254px, -794px, 558px);
}
.star:not(.is-sun):nth-child(265) {
-webkit-transform: translate3d(698px, 710px, 135px);
transform: translate3d(698px, 710px, 135px);
}
.star:not(.is-sun):nth-child(266) {
-webkit-transform: translate3d(-678px, 747px, -468px);
transform: translate3d(-678px, 747px, -468px);
}
.star:not(.is-sun):nth-child(267) {
-webkit-transform: translate3d(182px, -405px, 32px);
transform: translate3d(182px, -405px, 32px);
}
.star:not(.is-sun):nth-child(268) {
-webkit-transform: translate3d(-242px, -92px, -626px);
transform: translate3d(-242px, -92px, -626px);
}
.star:not(.is-sun):nth-child(269) {
-webkit-transform: translate3d(225px, 394px, -198px);
transform: translate3d(225px, 394px, -198px);
}
.star:not(.is-sun):nth-child(270) {
-webkit-transform: translate3d(-550px, 329px, 717px);
transform: translate3d(-550px, 329px, 717px);
}
.star:not(.is-sun):nth-child(271) {
-webkit-transform: translate3d(-57px, 205px, -18px);
transform: translate3d(-57px, 205px, -18px);
}
.star:not(.is-sun):nth-child(272) {
-webkit-transform: translate3d(78px, -298px, -682px);
transform: translate3d(78px, -298px, -682px);
}
.star:not(.is-sun):nth-child(273) {
-webkit-transform: translate3d(-273px, 451px, -510px);
transform: translate3d(-273px, 451px, -510px);
}
.star:not(.is-sun):nth-child(274) {
-webkit-transform: translate3d(787px, -559px, -479px);
transform: translate3d(787px, -559px, -479px);
}
.star:not(.is-sun):nth-child(275) {
-webkit-transform: translate3d(-480px, 484px, -97px);
transform: translate3d(-480px, 484px, -97px);
}
.star:not(.is-sun):nth-child(276) {
-webkit-transform: translate3d(170px, 716px, -747px);
transform: translate3d(170px, 716px, -747px);
}
.star:not(.is-sun):nth-child(277) {
-webkit-transform: translate3d(404px, -477px, 94px);
transform: translate3d(404px, -477px, 94px);
}
.star:not(.is-sun):nth-child(278) {
-webkit-transform: translate3d(-112px, 517px, -781px);
transform: translate3d(-112px, 517px, -781px);
}
.star:not(.is-sun):nth-child(279) {
-webkit-transform: translate3d(-285px, 723px, -37px);
transform: translate3d(-285px, 723px, -37px);
}
.star:not(.is-sun):nth-child(280) {
-webkit-transform: translate3d(147px, 311px, -674px);
transform: translate3d(147px, 311px, -674px);
}
.star:not(.is-sun):nth-child(281) {
-webkit-transform: translate3d(716px, -449px, -245px);
transform: translate3d(716px, -449px, -245px);
}
.star:not(.is-sun):nth-child(282) {
-webkit-transform: translate3d(669px, -160px, 31px);
transform: translate3d(669px, -160px, 31px);
}
.star:not(.is-sun):nth-child(283) {
-webkit-transform: translate3d(565px, 358px, -564px);
transform: translate3d(565px, 358px, -564px);
}
.star:not(.is-sun):nth-child(284) {
-webkit-transform: translate3d(-592px, -350px, -426px);
transform: translate3d(-592px, -350px, -426px);
}
.star:not(.is-sun):nth-child(285) {
-webkit-transform: translate3d(302px, 38px, 681px);
transform: translate3d(302px, 38px, 681px);
}
.star:not(.is-sun):nth-child(286) {
-webkit-transform: translate3d(241px, 442px, 244px);
transform: translate3d(241px, 442px, 244px);
}
.star:not(.is-sun):nth-child(287) {
-webkit-transform: translate3d(-489px, -769px, -746px);
transform: translate3d(-489px, -769px, -746px);
}
.star:not(.is-sun):nth-child(288) {
-webkit-transform: translate3d(-240px, 618px, -454px);
transform: translate3d(-240px, 618px, -454px);
}
.star:not(.is-sun):nth-child(289) {
-webkit-transform: translate3d(735px, 84px, 422px);
transform: translate3d(735px, 84px, 422px);
}
.star:not(.is-sun):nth-child(290) {
-webkit-transform: translate3d(399px, -752px, -720px);
transform: translate3d(399px, -752px, -720px);
}
.star:not(.is-sun):nth-child(291) {
-webkit-transform: translate3d(335px, 561px, -334px);
transform: translate3d(335px, 561px, -334px);
}
.star:not(.is-sun):nth-child(292) {
-webkit-transform: translate3d(736px, 450px, -42px);
transform: translate3d(736px, 450px, -42px);
}
.star:not(.is-sun):nth-child(293) {
-webkit-transform: translate3d(168px, 471px, -575px);
transform: translate3d(168px, 471px, -575px);
}
.star:not(.is-sun):nth-child(294) {
-webkit-transform: translate3d(-792px, 313px, -294px);
transform: translate3d(-792px, 313px, -294px);
}
.star:not(.is-sun):nth-child(295) {
-webkit-transform: translate3d(-73px, -425px, 66px);
transform: translate3d(-73px, -425px, 66px);
}
.star:not(.is-sun):nth-child(296) {
-webkit-transform: translate3d(-245px, -198px, 372px);
transform: translate3d(-245px, -198px, 372px);
}
.star:not(.is-sun):nth-child(297) {
-webkit-transform: translate3d(-758px, -209px, -483px);
transform: translate3d(-758px, -209px, -483px);
}
.star:not(.is-sun):nth-child(298) {
-webkit-transform: translate3d(-564px, 526px, 348px);
transform: translate3d(-564px, 526px, 348px);
}
.star:not(.is-sun):nth-child(299) {
-webkit-transform: translate3d(578px, 98px, -411px);
transform: translate3d(578px, 98px, -411px);
}
.star:not(.is-sun):nth-child(300) {
-webkit-transform: translate3d(390px, 604px, -206px);
transform: translate3d(390px, 604px, -206px);
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotateY(0) rotateX(0);
transform: rotateY(0) rotateX(0);
}
to {
-webkit-transform: rotateY(-360deg) rotateX(360deg);
transform: rotateY(-360deg) rotateX(360deg);
}
}
@keyframes rotation {
from {
-webkit-transform: rotateY(0) rotateX(0);
transform: rotateY(0) rotateX(0);
}
to {
-webkit-transform: rotateY(-360deg) rotateX(360deg);
transform: rotateY(-360deg) rotateX(360deg);
}
}
@-webkit-keyframes pulse {
from {
box-shadow: 0 0 20px #ffe696;
}
to {
box-shadow: 0 0 50px #fff;
}
}
@keyframes pulse {
from {
box-shadow: 0 0 20px #ffe696;
}
to {
box-shadow: 0 0 50px #fff;
}
}
恒星绕太阳转css,CSS3 宇宙/恒星/小行星动画相关推荐
- 恒星绕太阳转css,地球绕太阳转，太阳绕银河系中心转，银河系绕着什么转？
本文参加百家号 #科学了不起# 系列征文赛. 爱因斯坦的相对论表明,宇宙中没有绝对静止的参照系,所谓的静止不过是相对的概念,运动才是绝对的.小到粒子,大到天体都存在某种运动,它们并不会保持绝对静止. ...
- 恒星绕太阳转css,地球绕着太阳转，太阳绕着什么转？
小时候,老师在教导我们地理知识的时候,经常会教一句顺口溜:"月亮绕着地球转,地球绕着太阳转".可是,大家想过没有太阳绕着什么转呢? 太阳绕着黑洞旋转 由于古代观测手段的限制,古人认 ...
- HTML+CSS css3可爱布丁蛋糕表情动画特效
style.cs代码: *:before, *:after {position: absolute;content: ""; } *:hover {z-index: 10; }bo ...
- 全国联动css,CSS3 齿轮啮合联动动画
CSS 语言: CSSSCSS 确定 body { background: radial-gradient(circle, #333, #111); overflow: hidden; } .cog ...
- css设置元素抛物线,CSS3 transition 实现抛物线动画
您的位置: 富录-前端开发|web技术博客 > HTML&&CSS > CSS3 transition 实现抛物线动画 CSS3 transition 实现抛物线动画 发布 ...
- CSS基础篇--CSS/CSS3中的原生变量var详解
使用语法 首先我们先来看一个例子: html代码: <div class="element">这是一段文字</div> css代码: .element {w ...
- 闪烁点击效果css,CSS3自定义闪烁动画效果实例
都说HTML5和CSS3的出现直接终结了FLASH时代,不管这其中有没有夸张的成分,但是CSS3的动画功力还真不可小觑.下面我们就分享一下CSS3的自定义闪烁动画实现方法,先定义好动画样式代码:@-w ...
- [css] CSS3有哪些新增的特性？
[css] CSS3有哪些新增的特性? 边框圆角border-radius盒子阴影box-shadow文字阴影text-shadow2d.3d变换transformrotate()scale()ske ...
- [css] CSS3新增伪类有哪些并简要描述
[css] CSS3新增伪类有哪些并简要描述 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
最新文章
- 桌面式高清存储寻求合作
- oracle12c 新建表空间
- 深度学习保姆级入门教程 -- 论文+代码+常用工具
- oracle重命名日志成员出错,Oracle日志文件
- 蓝字冲销是什么意思_60秒学个词：Elusive 是什么意思？(美音版)
- 一段java并发编程代码
- 伪元素:placeholder-shown:focus-within
- Springboot项目搭建（三）整合thymeleaf模板
- NavigationView更改菜单icon和title颜色变化效果
- 2021高考技能考试成绩查询,2021年临床技能考试成绩出来了！附查询方式
- [ An Ac a Day ^_^ ] CodeForces 680A Bear and Five Cards
- 课程设计C语言歌手,【图片】发几个C语言课程设计源代码（恭喜自己当上技术小吧主）【东华理工大学吧】_百度贴吧...
- 小伙子自学C++编程简单DIY,即让你拥有一个屏幕画笔，非常实用！
- 佳能相机CF卡损坏MP4视频数据恢复技术
- 微软也招 Java！
- vue如何debugger
- 《红楼梦》香的祭祀文化
- c语言编译器前端实现,一个编译器（前端）的实现
- 【机器学习】一些常用的回归模型实战（9种回归模型）
- for和while循环