Welcome Home

WBOY
Release: 2024-09-10 18:00:16
Original
923 people have browsed it

Welcome Home

This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

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.

Demo

Journey

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);
}
Copy after login

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;
}
Copy after login

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);
}
Copy after login

The above is the detailed content of Welcome Home. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!