Space GroupA P’Getty
✨ KAIWIN NAW-IN
<head> <style> /* code reference 1 Space: https://codepen.io/jensaxena/pen/KQmvoK code reference 2 star fall: https://codepen.io/alphardex/pen/RwrVoeL?editors=0110 */ :root{ --shadow: 10px 10px white; } body{ background: radial-gradient( #1B2735 0%, #090A0F 100%); overflow: hidden; } .space{ background: hsla(0, 80%, 10%, 0) center / 200px 200px round; right:0; bottom:0; left:0; top:0; position: absolute; } .stars { animation: moving-star var(--delay) steps(1000, end) infinite; transform: preserve-3d; background-image: radial-gradient( 1px 1px at 25px 5px, #d32f2f, hsla(0, 0%, 0%, 0) ), radial-gradient( 1px 1px at 50px 25px, #6a1b9a, hsla(240, 0%, 0%, 0) ), radial-gradient( 1px 1px at 125px 20px, #303f9f, hsla(0, 0%, 0%, 0) ), radial-gradient( 1.5px 1.5px at 50px 75px, #2e7d32, hsla(0, 0%, 0%, 0) ), radial-gradient( 2px 2px at 15px 125px, white, hsla(0, 0%, 0%, 0) ), radial-gradient( 2.5px 2.5px at 110px 80px, #1e88e5, hsla(0, 0%, 0%, 0) ); } .yellow { color: #ffeb3b; } .green { color: #2e7d32; } .purple { color: #6a1b9a; } .orange { color: #f4511e; } .red { color: #d32f2f; } .sky { color: #1e88e5; } .blue { color: #303f9f; } .star-fall { position: absolute; top: -100px; left: -100px; width: 100%; height: 120%; transform: rotate(-135deg); } .star { --star-tail-height: 3px; --star-width: 40px; --tail-fade-duration: var(--fall-duration); position: absolute; top: var(--top-offset); left: 0; width: var(--star-tail-length); height: var(--star-tail-height); background: linear-gradient(45deg, currentColor, transparent); border-radius: 50%; filter: drop-shadow(0 0 6px currentColor); transform: translate3d(104em, 0, 0); animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite; } .star:nth-child(1) { --star-tail-length: 8.2em; --top-offset: 56.7vh; --fall-duration: 6.4s; --fall-delay: 8.7s; } .star:nth-child(2) { --star-tail-length: 7.7em; --top-offset: -3.8vh; --fall-duration: 10.9s; --fall-delay: 1.2s; } .star:nth-child(3) { --star-tail-length: 3.2em; --top-offset: 62.4vh; --fall-duration: 13.1s; --fall-delay: 8.3s; } .star:nth-child(4) { --star-tail-length: 4.4em; --top-offset: -7.3vh; --fall-duration: 10.0s; --fall-delay: 2.6s; } .star:nth-child(5) { --star-tail-length: 8.5em; --top-offset: -16.0vh; --fall-duration: 11.2s; --fall-delay: 1.7s; } .star:nth-child(6) { --star-tail-length: 9.2em; --top-offset: 46.4vh; --fall-duration: 13.9s; --fall-delay: 13.9s; } .star:nth-child(7) { --star-tail-length: 3.2em; --top-offset: 96.5vh; --fall-duration: 8.0s; --fall-delay: 5.7s; } .star:nth-child(8) { --star-tail-length: 4.9em; --top-offset: 28.9vh; --fall-duration: 5.7s; --fall-delay: 13.1s; } .star:nth-child(9) { --star-tail-length: 3.7em; --top-offset: -18.5vh; --fall-duration: 8.6s; --fall-delay: 12.5s; } .star:nth-child(10) { --star-tail-length: 8.1em; --top-offset: 78.1vh; --fall-duration: 8.9s; --fall-delay: 7.8s; } .star:nth-child(11) { --star-tail-length: 6.3em; --top-offset: 35.3vh; --fall-duration: 7.5s; --fall-delay: 8.7s; } .star:nth-child(12) { --star-tail-length: 7.5em; --top-offset: -3.7vh; --fall-duration: 13.5s; --fall-delay: 12.9s; } .star:nth-child(13) { --star-tail-length: 5.8em; --top-offset: -20.8vh; --fall-duration: 13.1s; --fall-delay: 8.2s; } .star:nth-child(14) { --star-tail-length: 9.7em; --top-offset: -68.5vh; --fall-duration: 8.3s; --fall-delay: 13.6s; } .star:nth-child(15) { --star-tail-length: 7.7em; --top-offset: -84.1vh; --fall-duration: 10.4s; --fall-delay: 6.1s; } .star:nth-child(16) { --star-tail-length: 9.3em; --top-offset: 66.2vh; --fall-duration: 9.9s; --fall-delay: 0.2s; } .star:nth-child(17) { --star-tail-length: 6.0em; --top-offset: -28.4vh; --fall-duration: 8.1s; --fall-delay: 3.7s; } .star:nth-child(18) { --star-tail-length: 8.8em; --top-offset: 70.6vh; --fall-duration: 9.5s; --fall-delay: 3.4s; } .star:nth-child(19) { --star-tail-length: 9.8em; --top-offset: 19.6vh; --fall-duration: 5.2s; --fall-delay: 0.3s; } .star:nth-child(20) { --star-tail-length: 8.1em; --top-offset: -12.0vh; --fall-duration: 9.8s; --fall-delay: 5.8s; } .star:nth-child(21) { --star-tail-length: 8.1em; --top-offset: 13.5vh; --fall-duration: 11.5s; --fall-delay: 11.1s; } .star:nth-child(22) { --star-tail-length: 4.5em; --top-offset: -56.5vh; --fall-duration: 12.9s; --fall-delay: 3.3s; } .star:nth-child(23) { --star-tail-length: 6.8em; --top-offset: -75.7vh; --fall-duration: 10.5s; --fall-delay: 12.9s; } .star:nth-child(24) { --star-tail-length: 3.4em; --top-offset: 27.0vh; --fall-duration: 12.5s; --fall-delay: 10.4s; } .star:nth-child(25) { --star-tail-length: 6.6em; --top-offset: 28.6vh; --fall-duration: 7.0s; --fall-delay: 13.3s; } .star:nth-child(26) { --star-tail-length: 7.8em; --top-offset: 64.6vh; --fall-duration: 10.9s; --fall-delay: 12.7s; } .star:nth-child(27) { --star-tail-length: 4.0em; --top-offset: 43.7vh; --fall-duration: 11.6s; --fall-delay: 10.3s; } .star:nth-child(28) { --star-tail-length: 6.0em; --top-offset: -43.0vh; --fall-duration: 8.9s; --fall-delay: 4.5s; } .star:nth-child(29) { --star-tail-length: 8.7em; --top-offset: -22.5vh; --fall-duration: 5.0s; --fall-delay: 10.5s; } .star:nth-child(30) { --star-tail-length: 8.9em; --top-offset: -22.7vh; --fall-duration: 12.5s; --fall-delay: 11.7s; } .star:nth-child(31) { --star-tail-length: 6.1em; --top-offset: -99.0vh; --fall-duration: 10.1s; --fall-delay: 13.2s; } .star:nth-child(32) { --star-tail-length: 4.7em; --top-offset: -38.1vh; --fall-duration: 12.1s; --fall-delay: 2.9s; } .star:nth-child(33) { --star-tail-length: 7.8em; --top-offset: -13.4vh; --fall-duration: 5.1s; --fall-delay: 5.8s; } .star:nth-child(34) { --star-tail-length: 5.3em; --top-offset: 29.4vh; --fall-duration: 5.3s; --fall-delay: 13.0s; } .star:nth-child(35) { --star-tail-length: 6.4em; --top-offset: -56.5vh; --fall-duration: 8.5s; --fall-delay: 14.7s; } .star:nth-child(36) { --star-tail-length: 8.1em; --top-offset: -55.9vh; --fall-duration: 10.8s; --fall-delay: 0.9s; } .star:nth-child(37) { --star-tail-length: 9.2em; --top-offset: 75.5vh; --fall-duration: 8.9s; --fall-delay: 14.0s; } .star:nth-child(38) { --star-tail-length: 5.0em; --top-offset: 94.5vh; --fall-duration: 14.3s; --fall-delay: 1.1s; } .star:nth-child(39) { --star-tail-length: 4.4em; --top-offset: 62.3vh; --fall-duration: 12.3s; --fall-delay: 6.0s; } .star:nth-child(40) { --star-tail-length: 7.4em; --top-offset: -28.9vh; --fall-duration: 10.4s; --fall-delay: 5.1s; } .star:nth-child(41) { --star-tail-length: 5.9em; --top-offset: 49.9vh; --fall-duration: 11.1s; --fall-delay: 14.4s; } .star:nth-child(42) { --star-tail-length: 8.6em; --top-offset: -75.0vh; --fall-duration: 8.1s; --fall-delay: 8.4s; } .star:nth-child(43) { --star-tail-length: 9.8em; --top-offset: -88.0vh; --fall-duration: 10.3s; --fall-delay: 10.9s; } .star:nth-child(44) { --star-tail-length: 4.7em; --top-offset: -38.9vh; --fall-duration: 14.9s; --fall-delay: 11.0s; } .star:nth-child(45) { --star-tail-length: 8.8em; --top-offset: 31.9vh; --fall-duration: 12.2s; --fall-delay: 14.0s; } .star:nth-child(46) { --star-tail-length: 6.5em; --top-offset: -61.9vh; --fall-duration: 12.3s; --fall-delay: 12.1s; } .star:nth-child(47) { --star-tail-length: 3.9em; --top-offset: 88.3vh; --fall-duration: 7.0s; --fall-delay: 5.9s; } .star:nth-child(48) { --star-tail-length: 6.1em; --top-offset: -90.2vh; --fall-duration: 14.0s; --fall-delay: 5.9s; } .star:nth-child(49) { --star-tail-length: 5.5em; --top-offset: -96.4vh; --fall-duration: 10.2s; --fall-delay: 8.5s; } .star:nth-child(50) { --star-tail-length: 7.4em; --top-offset: 12.5vh; --fall-duration: 14.5s; --fall-delay: 11.7s; } .star::before, .star::after { position: absolute; content: ''; top: 0; left: calc(var(--star-width) / -2); width: var(--star-width); height: 100%; background: linear-gradient(45deg, transparent, currentColor, transparent); border-radius: inherit; animation: blink 2s linear infinite; } .star::before { transform: rotate(45deg); } .star::after { transform: rotate(-45deg); } @keyframes fall { to { transform: translate3d(-30em, 0, 0); } } @keyframes tail-fade { 0%, 50% { width: var(--star-tail-length); opacity: 1; } 70%, 80% { width: 0; opacity: 0.3; } 100% { width: 0; opacity: 0; } } @keyframes blink { 50% { opacity: 0.3; } } @keyframes moving-star{ 0% { transform: rotatez(0deg); } 100%{ transform: rotatez(360deg) ; } } </style> </head> <body> <div class="space stars" style="--delay: 20s"></div> <div class="space stars" style="--delay: 40s"></div> <div class="space stars" style="--delay: 60s"></div> <div class="space stars" style="--delay: 80s"></div> <div class="star-fall"> <div class="star green"></div> <div class="star green"></div> <div class="star green"></div> <div class="star green"></div> <div class="star green"></div> <div class="star green"></div> <div class="star green"></div> <div class="star green"></div> <div class="star green"></div> <div class="star purple"></div> <div class="star purple"></div> <div class="star purple"></div> <div class="star purple"></div> <div class="star purple"></div> <div class="star purple"></div> <div class="star purple"></div> <div class="star purple"></div> <div class="star purple"></div> <div class="star yellow"></div> <div class="star yellow"></div> <div class="star yellow"></div> <div class="star yellow"></div> <div class="star yellow"></div> <div class="star yellow"></div> <div class="star yellow"></div> <div class="star yellow"></div> <div class="star yellow"></div> <div class="star orange"></div> <div class="star orange"></div> <div class="star orange"></div> <div class="star orange"></div> <div class="star orange"></div> <div class="star orange"></div> <div class="star orange"></div> <div class="star orange"></div> <div class="star orange"></div> <div class="star red"></div> <div class="star red"></div> <div class="star red"></div> <div class="star red"></div> <div class="star red"></div> <div class="star red"></div> <div class="star red"></div> <div class="star red"></div> <div class="star red"></div> <div class="star sky"></div> <div class="star sky"></div> <div class="star sky"></div> <div class="star sky"></div> <div class="star sky"></div> <div class="star sky"></div> <div class="star sky"></div> <div class="star sky"></div> <div class="star sky"></div> <div class="star blue"></div> <div class="star blue"></div> <div class="star blue"></div> <div class="star blue"></div> <div class="star blue"></div> <div class="star blue"></div> <div class="star blue"></div> <div class="star blue"></div> <div class="star blue"></div> </div> <script> </script> </body>