집에 오신 것을 환영합니다

Frontend Challenge v24.09.04, CSS Art: Space에 대한 제출물입니다.

영감

'웰컴 홈' 장면은 공상과학 영화의 미학을 차용해 오랜 우주여행을 마치고 지구로 돌아온 느낌에서 영감을 얻었다.

데모

여행

별이 빛나는 배경을 만들기 위해 시차 효과를 위해 서로 다른 TranslateZ 및 배율 값을 사용하는 3개의 .stars-layer div를 사용했습니다.

.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);
}

방사형 그라데이션 배경의 유사 요소는 키프레임을 사용하여 애니메이션으로 반짝이는 별을 만듭니다.

.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;
}

지구 빛 효과는 .earth-glow div, 방사형 그라데이션 배경 및 흐림 필터를 사용하여 구현됩니다.

.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);
}

위 내용은 집에 오신 것을 환영합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!