歡迎回家

這是前端挑戰 v24.09.04，CSS 藝術：空間的提交。

靈感

「歡迎回家」場景的靈感來自長途太空旅行後返回地球的感覺，並借鑒了科幻電影的美學。

示範

旅行

為了創建星空背景，我使用了三個 .stars-layer div，它們具有不同的 translateZ 和縮放值以實現視差效果：

.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中文網其他相關文章！