Kanvas Kosmik: Seni CSS Ruang Dalam Interaktif

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

Inspirasi

Projek ini, "Cosmic Canvas: Interactive Deep Space CSS Art," telah diilhamkan oleh keindahan angkasa lepas yang luas dan cabaran mencipta semula fenomena cakerawala hanya menggunakan CSS dan JavaScript. Matlamatnya adalah untuk mencipta pemandangan angkasa lepas yang mengasyikkan dan animasi yang menunjukkan kuasa teknologi web moden untuk mencipta seni yang kompleks dan menakjubkan secara visual tanpa memerlukan perpustakaan grafik yang berat.

Demo

Pautan Repo Github: https://github.com/ZibrasIsmail/Interactive-Deep-Space-CSS-Art
Pautan Dihoskan Github: https://zibrasismail.github.io/Interactive-Deep-Space-CSS-Art

Perjalanan

Projek ini bermula sebagai penerokaan teknik CSS lanjutan dan berkembang menjadi pemandangan angkasa lepas yang komprehensif. Berikut ialah beberapa aspek utama perjalanan:

1. Animasi CSS Kompleks: Mencipta pergerakan orbit yang realistik untuk bulan dan asteroid merupakan satu cabaran yang besar. Saya belajar menggunakan animasi CSS yang kompleks dengan pelbagai transformasi untuk mencapai orbit yang licin dan bulat.

Penciptaan Elemen Dinamik: Menggunakan JavaScript untuk mencipta bintang, galaksi dan asteroid secara dinamik mengajar saya banyak tentang manipulasi DOM dan cara menjana dengan cekap banyak elemen dengan sifat yang berbeza-beza.

Warna dan Tekstur: Menghasilkan warna dan tekstur yang betul untuk badan angkasa ialah latihan dalam kreativiti. Saya bereksperimen dengan pelbagai kecerunan dan bayang-bayang kotak untuk mencapai rasa kedalaman dan realisme.

Struktur HTML

Fail HTML menyediakan struktur asas pemandangan angkasa:

<div class="space-scene">
  <div class="stars"></div>
  <div class="galaxies"></div>
  <div class="shooting-stars"></div>
  <div class="nebula"></div>
  <div class="planet-system">
    <div class="planet main-planet"></div>
    <div class="planet-ring"></div>
    <div class="moon moon1"></div>
    <div class="moon moon2"></div>
    <div class="moon moon3"></div>
  </div>
  <div class="asteroid-belt"></div>
</div>

Struktur ini mencipta bekas untuk pelbagai elemen ruang, yang akan digayakan dan dianimasikan menggunakan CSS dan diisi dengan JavaScript.

Penggayaan dan Animasi CSS

Kod CSS mencipta pemandangan angkasa yang kaya dengan visual dengan pelbagai elemen angkasa. Ia menyediakan latar belakang gelap skrin penuh untuk pemandangan angkasa dan mentakrifkan gaya dan animasi untuk objek angkasa yang berbeza. Bintang dan galaksi diletakkan secara mutlak dan diberi animasi berkelip dan bercahaya. Kesan nebula dicipta menggunakan pelbagai kecerunan jejari. Planet utama digayakan dengan kecerunan jejari dan kesan cahaya, manakala cincin planet dicipta menggunakan sempadan dan diputar untuk penampilan 3D. Tiga bulan digayakan dengan warna yang berbeza dan diberi animasi mengorbit menggunakan transformasi putar dan terjemah. Bintang penangkapan dicipta dengan kecerunan linear dan dianimasikan untuk bergerak merentasi skrin. Tali pinggang asteroid diletakkan di sekeliling planet, dengan asteroid individu dianimasikan untuk berputar. CSS secara meluas menggunakan animasi bingkai utama untuk mencipta pergerakan dan kesan visual, menghidupkan elemen HTML statik.

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.space-scene {
  width: 100%;
  height: 100%;
  background: #000000;
  position: relative;
  overflow: hidden;
}

.stars,
.galaxies {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  animation: twinkle 4s infinite ease-in-out;
}

.galaxy {
  position: absolute;
  border-radius: 50%;
  animation: glow 4s infinite alternate;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3);
  }
}

.nebula {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(255, 0, 100, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(0, 100, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(255, 100, 0, 0.1) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at 60% 60%,
      rgba(100, 0, 255, 0.1) 0%,
      transparent 60%
    );
  filter: blur(20px);
  opacity: 0.5;
}

.planet-system {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
}

.main-planet {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at 30% 30%, #4a89dc, #1c3c78);
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(74, 137, 220, 0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.planet-ring {
  width: 225px;
  height: 225px;
  border: 10px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
}

.moon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}

.moon1 {
  animation: orbit 30s linear infinite; /* Increased from 10s to 30s */
  background: radial-gradient(circle at 30% 30%, #ffd700, #ffa500);
  box-shadow:
    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(255, 215, 0, 0.6);
}

.moon2 {
  animation: orbit 45s linear infinite reverse; /* Increased from 15s to 45s */
  background: radial-gradient(circle at 30% 30%, #add8e6, #4169e1);
  box-shadow:
    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(65, 105, 225, 0.6);
}

.moon3 {
  animation: orbit 60s linear infinite; /* Increased from 20s to 60s */
  background: radial-gradient(circle at 30% 30%, #f0e68c, #daa520);
  box-shadow:
    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(218, 165, 32, 0.6);
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}

.shooting-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.shooting-star {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, #ffffff, transparent);
  animation: shoot 3s ease-out infinite;
}

@keyframes shoot {
  0% {
    transform: translateX(-100px) translateY(100px);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(1000px) translateY(-1000px);
    opacity: 0;
  }
}

.asteroid-belt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
  width: 350px;
  height: 350px;
  border-radius: 50%;
}

.asteroid {
  position: absolute;
  background: #555;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform-origin: 175px 0;
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) translateX(175px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(175px) rotate(-360deg);
  }
}

Kod JavaScript mencipta dan meletakkan banyak elemen kecil secara dinamik yang membentuk pemandangan angkasa lepas. Fungsi utama, mencipta Objek Celestial, memilih elemen kontena dan kemudian gelung untuk mencipta bilangan bintang, galaksi, bintang jatuh dan asteroid yang ditentukan. Untuk setiap elemen yang dicipta, ia menetapkan kelas CSS yang sesuai, secara rawak menentukan sifat seperti saiz dan kedudukan serta menambah kelewatan dan tempoh animasi untuk penampilan yang lebih semula jadi. Untuk galaksi, ia juga memilih warna secara rawak daripada tatasusunan yang dipratentukan. Setiap elemen yang dibuat kemudiannya dilampirkan pada bekas masing-masing dalam DOM. Penciptaan dinamik ini membolehkan sejumlah besar elemen ditambah dengan cekap, mencipta pemandangan ruang yang terperinci tanpa mengekod setiap objek secara manual. Skrip berjalan apabila tetingkap dimuatkan, memastikan semua elemen HTML diletakkan sebelum menambah objek angkasa.

function createCelestialObjects() {
  const starsContainer = document.querySelector(".stars");
  const galaxiesContainer = document.querySelector(".galaxies");
  const shootingStarsContainer = document.querySelector(".shooting-stars");
  const asteroidBelt = document.querySelector(".asteroid-belt");

  const starCount = 1000;
  const galaxyCount = 50;
  const shootingStarCount = 5;
  const asteroidCount = 100;

  const galaxyColors = ["#FFD700", "#87CEEB", "#FFA500", "#FF69B4", "#00CED1"];

  for (let i = 0; i < starCount; i++) {
    const star = document.createElement("div");
    star.className = "star";
    star.style.width = star.style.height = `${Math.random() * 2}px`;
    star.style.left = `${Math.random() * 100}%`;
    star.style.top = `${Math.random() * 100}%`;
    star.style.animationDuration = `${Math.random() * 2 + 2}s`;
    star.style.animationDelay = `${Math.random() * 4}s`;
    starsContainer.appendChild(star);
  }

  for (let i = 0; i < galaxyCount; i++) {
    const galaxy = document.createElement("div");
    galaxy.className = "galaxy";
    const size = Math.random() * 20 + 5;
    galaxy.style.width = `${size}px`;
    galaxy.style.height = `${size / 2}px`;
    galaxy.style.left = `${Math.random() * 100}%`;
    galaxy.style.top = `${Math.random() * 100}%`;
    galaxy.style.backgroundColor =
      galaxyColors[Math.floor(Math.random() * galaxyColors.length)];
    galaxy.style.transform = `rotate(${Math.random() * 360}deg)`;
    galaxiesContainer.appendChild(galaxy);
  }

  for (let i = 0; i < shootingStarCount; i++) {
    const shootingStar = document.createElement("div");
    shootingStar.className = "shooting-star";
    shootingStar.style.left = `${Math.random() * 100}%`;
    shootingStar.style.top = `${Math.random() * 100}%`;
    shootingStar.style.animationDelay = `${Math.random() * 5}s`;
    shootingStarsContainer.appendChild(shootingStar);
  }

  for (let i = 0; i < asteroidCount; i++) {
    const asteroid = document.createElement("div");
    asteroid.className = "asteroid";
    asteroid.style.width = asteroid.style.height = `${Math.random() * 3 + 1}px`;
    asteroid.style.animationDuration = `${Math.random() * 10 + 10}s`;
    asteroid.style.animationDelay = `${Math.random() * 10}s`;
    asteroidBelt.appendChild(asteroid);
  }
}

window.addEventListener("load", createCelestialObjects);

Atas ialah kandungan terperinci Kanvas Kosmik: Seni CSS Ruang Dalam Interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!