Maison > Article > interface Web > Bienvenue à la maison
Ceci est une soumission pour Frontend Challenge v24.09.04, CSS Art: Space.
La scène "Welcome Home" s'inspire de la sensation de retour sur Terre après un long voyage spatial, s'inspirant de l'esthétique des films de science-fiction.
Pour créer l'arrière-plan étoilé, j'ai utilisé trois divs .stars-layer avec différentes valeurs de translation et d'échelle pour un effet de parallaxe :
.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); }
Des pseudo-éléments avec des arrière-plans à dégradé radial créent les étoiles scintillantes, animées à l'aide d'images clés :
.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; }
L'effet de lueur de la Terre est obtenu avec un div .earth-glow, un arrière-plan dégradé radial et un filtre de flou :
.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); }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!