Cosmic Canvas: インタラクティブな深宇宙 CSS アート

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

インスピレーション

このプロジェクト「Cosmic Canvas: インタラクティブな深宇宙 CSS アート」は、宇宙の広大な美しさと、CSS と JavaScript だけを使用して天体現象を再現するという挑戦に触発されました。目標は、重いグラフィックス ライブラリを必要とせずに、複雑で視覚的に素晴らしいアートを作成する最新の Web テクノロジーの力を実証する、没入型のアニメーション化された宇宙シーンを作成することでした。

デモ

Github リポジトリ リンク: https://github.com/ZibrasIsmail/Interactive-Deep-Space-CSS-Art
Github でホストされているリンク: https://zibrasismail.github.io/Interactive-Deep-Space-CSS-Art

旅

このプロジェクトは、高度な CSS 技術の探求として始まり、包括的な宇宙シーンに成長しました。この旅の重要な側面をいくつか紹介します:

1. 複雑な CSS アニメーション: 衛星や小惑星の現実的な軌道運動を作成することは、大きな課題でした。複数の変換を含む複雑な CSS アニメーションを使用して、滑らかな円軌道を実現する方法を学びました。

動的要素の作成: JavaScript を使用して星、銀河、小惑星を動的に作成することで、DOM の操作と、さまざまなプロパティを持つ多くの要素を効率的に生成する方法について多くのことを学びました。

色とテクスチャ: 天体に適切な色とテクスチャを作成することは、創造性の訓練でした。奥行き感とリアル感を実現するために、さまざまなグラデーションとボックス シャドウを試してみました。

HTMLの構造

HTML ファイルは、宇宙シーンの基本構造を設定します。

<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>

この構造は、さまざまな空間要素のコンテナを作成します。これらのコンテナは、CSS を使用してスタイル設定およびアニメーション化され、JavaScript で設定されます。

CSS スタイルとアニメーション

CSS コードは、さまざまな天体要素を含む視覚的に豊かな宇宙シーンを作成します。宇宙シーンの全画面の暗い背景を設定し、さまざまな宇宙オブジェクトのスタイルとアニメーションを定義します。星や銀河は絶対的に配置され、きらきらと光るアニメーションが与えられます。星雲効果は、複数の放射状グラデーションを使用して作成されます。主惑星は放射状のグラデーションとグロー効果でスタイル設定され、惑星リングは境界線を使用して作成され、3D 外観のために回転されます。 3 つの衛星は異なる色でスタイル設定され、回転および移動変換を使用して周回するアニメーションが与えられます。流れ星は線形グラデーションで作成され、画面上を移動するようにアニメーション化されます。小惑星帯は惑星の周りに配置されており、個々の小惑星が回転するようにアニメーション化されています。 CSS はキーフレーム アニメーションを広範囲に使用して動きと視覚効果を作成し、静的な HTML 要素に命を吹き込みます。

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);
  }
}

JavaScript コードは、宇宙シーンを構成する多数の小さな要素を動的に作成して配置します。メイン関数の天体オブジェクトの作成では、コンテナ要素を選択し、ループして指定された数の星、銀河、流れ星、小惑星を作成します。作成された要素ごとに、適切な CSS クラスを設定し、サイズや位置などのプロパティをランダムに決定し、より自然な外観にするためにアニメーションの遅延と継続時間を追加します。銀河の場合は、事前定義された配列から色もランダムに選択されます。作成された各要素は、DOM 内のそれぞれのコンテナーに追加されます。この動的な作成により、多数の要素を効率的に追加でき、各オブジェクトを手動でコーディングすることなく詳細な空間シーンを作成できます。ウィンドウの読み込み時にスクリプトが実行され、天体を追加する前にすべての HTML 要素が配置されていることを確認します。

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);

以上がCosmic Canvas: インタラクティブな深宇宙 CSS アートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。