Rumah > hujung hadapan web > tutorial css > Selamat pulang

Selamat pulang

WBOY
Lepaskan: 2024-09-10 18:00:16
asal
959 orang telah melayarinya

Welcome Home

Ini ialah penyerahan untuk Frontend Challenge v24.09.04, CSS Art: Space.

Inspirasi

Adegan "Welcome Home" diilhamkan oleh perasaan kembali ke Bumi selepas perjalanan angkasa yang panjang, yang diambil daripada estetika filem sci-fi.

Demo

Perjalanan

Untuk mencipta latar belakang berbintang, saya menggunakan tiga div .stars-layer dengan translateZ dan nilai skala yang berbeza untuk kesan paralaks:

.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);
}
Salin selepas log masuk

Unsur pseudo dengan latar belakang kecerunan jejari mencipta bintang berkelipan, dianimasikan menggunakan bingkai utama:

.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;
}
Salin selepas log masuk

Kesan cahaya Bumi dicapai dengan div .earth-cahaya, latar belakang kecerunan jejari dan penapis kabur:

.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);
}
Salin selepas log masuk

Atas ialah kandungan terperinci Selamat pulang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan