집에 오신 것을 환영합니다-CSS 튜토리얼-php.cn

집에 오신 것을 환영합니다

WBOY

풀어 주다： 2024-09-10 18:00:16

원래의

898명이 탐색했습니다.

Welcome Home

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!