우주 캔버스: 인터랙티브 딥 스페이스 CSS 아트

Frontend Challenge v24.09.04, CSS Art: Space에 대한 제출물입니다.

영감

이 프로젝트 "Cosmic Canvas: Interactive Deep Space CSS Art"는 우주 공간의 광활한 아름다움과 CSS와 JavaScript만을 사용하여 천체 현상을 재현하려는 도전에서 영감을 받았습니다. 목표는 무거운 그래픽 라이브러리 없이도 복잡하고 시각적으로 뛰어난 예술 작품을 제작할 수 있는 최신 웹 기술의 힘을 보여주는 몰입도 높은 애니메이션 공간 장면을 만드는 것이었습니다.

데모

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 모양으로 만들어졌습니다. 세 개의 달은 서로 다른 색상으로 스타일이 지정되었으며 회전 및 변환 변환을 사용하여 궤도 애니메이션을 제공합니다. 슈팅 스타는 선형 그래디언트를 사용하여 생성되고 애니메이션을 통해 화면을 가로질러 이동합니다. 소행성 벨트는 행성 주위에 위치하며, 개별 소행성은 회전하도록 움직입니다. 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);

위 내용은 우주 캔버스: 인터랙티브 딥 스페이스 CSS 아트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!