Willkommen zu Hause

Dies ist eine Einreichung für Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

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.

Demo

Reise

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!