궤도 CSS를 사용한 태양계-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

궤도 CSS를 사용한 태양계

PHPz

Sep 05, 2024 am 06:00 AM

이 튜토리얼에서는 HTML, CSS 및 Orbit CSS 프레임워크를 사용하여 애니메이션 태양계를 만드는 방법을 배웁니다. Dev.to에서 본 다양하고 창의적인 태양계 시각화에 영감을 받아 우주에 하나 더 추가하면 좋겠다고 생각했습니다.

면책조항: 이 프로젝트는 주요 행성(왜행성 제외)을 특징으로 하는 태양계를 단순화하여 표현한 것이며 정확한 천문 시뮬레이션이 아닙니다.

1단계: 프로젝트 설정

태양계 코드를 삽입할 HTML 파일을 만드는 것부터 시작하세요. 또한 HTML 문서의 헤드에 Orbit CSS 파일을 연결하세요.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>The Solar System</title>
   <link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
</head>
<body>
   <div class="bigbang">
   <!-- Solar system here -->
   </div>
</body>
</html>

로그인 후 복사

또는 Codepen Orbit 시작 템플릿을 사용할 수도 있습니다

2단계: 태양계의 HTML 구조

.bigbang 클래스가 있는 div 내부에는 행성, 궤도 및 위성을 나타내는 요소를 추가하기 시작합니다. 이를 위해 몇 가지 Orbit 요소를 사용하겠습니다.

<div class="bigbang">
  <div class="gravity-spot from-3x">
    <div class="orbit-0">
      <div class="satellite sun grow-3x"></div>
    </div>
    <div class="orbit-1">
      <div class="satellite mercury shrink-60"></div>
    </div>
  </div>
</div>

로그인 후 복사

위 코드에서 .bigbang 클래스는 우리 프로젝트의 원본입니다. 그 안에 중력 중심을 나타내는 .gravity-spot과 중력 중심의 궤도인 .orbit-0을 추가했습니다. 그 후 우리는 태양을 표시하기 위해 .satellite 및 .sun을 추가했습니다. 다음으로, 반경이 작은 중심에 가까운 궤도인 .orbit-1을 만들었습니다. 그리고 그 안에 수성을 넣습니다.

from-3x, .grow-3x 및shrink-60과 같은 일부 Orbit 유틸리티 클래스가 있는지 확인하세요. 이는 방사형 레이아웃과 요소 크기를 조정하는 데 사용됩니다. 예를 들어, .from-3x는 궤도가 세 궤도 길이의 오프셋으로 시작됨을 나타냅니다. .grow-3x는 태양의 궤도 크기가 3개임을 나타내고, .shrink-60은 수성의 궤도 크기가 40%임을 나타냅니다.

모든 궤도와 행성을 완료하면 다음과 같은 결과가 나타납니다.

The Solar System with Orbit CSS

달, 고리, 소행성 추가
지구, 화성, 목성, 토성, 천왕성, 해왕성과 같은 일부 행성에는 위성이 있습니다. 행성의 중력을 시뮬레이션하기 위해 .gravity-spot 클래스를 가진 요소 내부에 넣을 수 있습니다. 달 전체가 아닌 일부 달만 생성한다는 점을 명심하세요.

<div class="orbit-3">
    <div class="satellite earth">
       <div class="gravity-spot">
          <div class="orbit-1 shrink-30 ">
            <div class="satellite shrink-70 moon"></div>
          </div>
       </div>
    </div>
</div>

로그인 후 복사

여기서 우리는 행성에 달을 만들고 일부 유틸리티 클래스를 사용하여 레이아웃과 크기를 조정했습니다.

이제 토성과 해왕성에 고리를 추가할 차례입니다.

<div class="orbit-14">
   <div class="satellite neptune grow-0.1x">
      <div class="gravity-spot ring">
         <div class="orbit-1 shrink-30"></div>
      </div>
    </div>
</div>

로그인 후 복사

마지막으로 소행성대를 재현하기 위해 소행성을 많이 추가합니다

<div class="orbit-6 asteroid-belt">
   <div class="satellite shrink-90"></div>
   <div class="satellite shrink-70"></div>
   <div class="satellite shrink-80"></div>
   <div class="satellite shrink-90"></div>
   <!— … —>
</div>
<div class="orbit-6 from-40 asteroid-belt"></div>
<div class="orbit-6 from-20 asteroid-belt"></div>
<!— … —>

로그인 후 복사

여기에서는 시작 각도를 설정하고 무작위 소행성의 환상을 생성할 수 있는 from-*라는 새로운 유틸리티 클래스를 사용합니다.

모든 달, 고리, 소행성을 추가하면 다음과 같은 결과가 나옵니다.

The Solar System with Orbit CSS

3단계: 태양계 스타일링

여기에는 태양과 행성의 실제 이미지가 필요합니다. 처음에는 내부 회전을 시뮬레이션하기 위해 해당 이미지를 이동하려고 했지만 배경 위치 속성에 애니메이션을 적용하는 것은 CPU에 매우 비용이 많이 들기 때문에 CPU 소모를 방지하고 부드러운 애니메이션을 유지하기 위해 애니메이션 gif를 사용하기로 결정했습니다. Orbit에는 위성 내부에서 풍부한 콘텐츠를 추가하는 데 사용되는 .capsule이라는 특수 클래스가 있습니다.

지구

    <div class="orbit-3">
      <div class="satellite earth">
        <div class="capsule ">
          <div class="surface"></div>
        </div>
      </div>
    </div>

로그인 후 복사

.earth .surface {
  background: url("https://media.tenor.com/0we9sWcmUtYAAAAi/wingedratsecrettag-earth.gif");
  background-size: auto 100%;
}

로그인 후 복사

** 3D 효과 **

3D 환상을 생성하기 위해 몇 가지 CSS 그라디언트를 사용합니다.

.sun:before,
.surface:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 0px,
    yellow,
    rgba(255, 255, 255, 0) 58%
  );
  -webkit-filter: blur(5px);
  z-index: 2;
}
.sun:after,
.surface:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(245, 237, 48, 0),
    rgba(200, 190, 20, 0.2) 50%,
    #575300 100%
  );
}

로그인 후 복사

모든 이미지를 배치한 후 다음을 얻습니다.

The Solar System with Orbit CSS

4단계: 태양계 애니메이션

CSS 애니메이션을 사용하여 태양 주위를 공전하는 행성과 달을 만듭니다. 먼저 @keyframe 애니메이션을 만듭니다.

@keyframes rotate {
  to {
    rotate: 360deg;
  }
}

로그인 후 복사

그런 다음 각 행성과 태양에 애니메이션 속성을 추가합니다. 이를 안정화하려면 행성 .capsule 클래스에 "카운터" 애니메이션을 포함해야 한다는 점을 명심하세요. 태양은 축을 중심으로만 회전하므로 .capsule 및 "카운터" 애니메이션을 포함할 필요가 없습니다.

.earth {
  --t: 6315.79ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}

.capsule {
  animation: rotate var(--t, 20s) linear infinite;
}

로그인 후 복사

이제 애니메이션 2D 태양계가 생겼습니다.

The Solar System with Orbit CSS

5단계: 관점

더 현실적으로 표현하기 위해 .bigbang에 대한 관점과 태양, 달 궤도 및 행성의 transnform:rotateX 속성을 사용하여 의사 3D 효과를 생성할 수 있습니다.

.bigbang {
  perspective: 150px;
  perspective-origin: 50% 100%;
}

.gravity-spot {
  transform: rotateX(10deg);
   transform-style: preserve-3d;
}

.orbit-0 {
  transform: rotateX(-5deg);
}

로그인 후 복사

축하합니다!! 이것이 우리 태양계의 최종 모습입니다.

결론

이 튜토리얼에서는 HTML, CSS 및 Orbit CSS 프레임워크를 사용하여 애니메이션 태양계를 만드는 과정을 안내했습니다. 흥미롭고 재미있게 보셨기를 바랍니다. Orbit은 거의 모든 종류의 방사형 인터페이스를 만들 수 있도록 설계되었으므로 살펴보고 이를 사용하여 무언가를 만들면 알려주세요!