Heim > Artikel > Web-Frontend > Willkommen zu Hause
Dies ist eine Einreichung für Frontend Challenge v24.09.04, CSS Art: Space.
Die „Welcome Home“-Szene ist von dem Gefühl inspiriert, nach einer langen Weltraumreise zur Erde zurückzukehren, und basiert auf der Ästhetik von Science-Fiction-Filmen.
Um den Sternenhintergrund zu erstellen, habe ich drei .stars-Layer-Divs mit unterschiedlichen TranslateZ- und Skalierungswerten für einen Parallaxeneffekt verwendet:
.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); }
Pseudoelemente mit radial verlaufenden Hintergründen erzeugen die funkelnden Sterne, animiert mit 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; }
Der Earth-Glow-Effekt wird mit einem .earth-glow-Div, einem radialen Verlaufshintergrund und einem Unschärfefilter erreicht:
.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); }
Das obige ist der detaillierte Inhalt vonWillkommen zu Hause. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!