おかえりなさい

これは、Frontend Challenge v24.09.04、CSS アート: スペースへの提出物です。

インスピレーション

「おかえり」のシーンは、SF 映画の美学を参考にして、長い宇宙旅行を終えて地球に戻ったときの感覚をイメージしています。

デモ

旅

星空の背景を作成するために、視差効果のために異なるtranslateZとscale値を持つ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 中国語 Web サイトの他の関連記事を参照してください。