This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.
The "Welcome Home" scene is inspired by the feeling of returning to Earth after a long space journey, drawing from the aesthetics of sci-fi movies.
To create the starry background, I used three .stars-layer divs with different translateZ and scale values for a parallax effect:
.stars-layer { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; animation: rotate 240s linear infinite; } .stars-layer-1 { transform: translateZ(-300px) scale(2); } .stars-layer-2 { transform: translateZ(-200px) scale(1.75); } .stars-layer-3 { transform: translateZ(-100px) scale(1.5); }
Pseudo-elements with radial-gradient backgrounds create the twinkling stars, animated using keyframes:
.stars-layer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: 350px 350px; animation: twinkle 4s infinite ease-in-out; }
The Earth glow effect is achieved with a .earth-glow div, a radial gradient background, and a blur filter:
.earth-glow { position: absolute; bottom: -20vh; left: 0; width: 100%; height: 40vh; background: radial-gradient(...); border-radius: 50% 50% 0 0 / 100% 100% 0 0; filter: blur(16px); }
The above is the detailed content of Welcome Home. For more information, please follow other related articles on the PHP Chinese website!