Heim  >  Artikel  >  Web-Frontend  >  Willkommen zu Hause

Willkommen zu Hause

WBOY
WBOYOriginal
2024-09-10 18:00:16918Durchsuche

Welcome Home

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Grid und FlexboxNächster Artikel:Grid und Flexbox