CSS의 태양계

태양계는 CSS로 많은 작업을 수행했습니다. Codepen을 검색해 보세요! 그럼 왜 또 할까요?

상황이 점점 더 좋아지고 단순해지기 때문에 이제 CSS 몇 줄만으로 반응형 태양계를 만들 수 있습니다.

아주 기본적인 마크업부터 시작해 보겠습니다.

<ol>
  <li class="sun"></li>
  <li class="mercury"></li>
  <li class="venus"></li>
  <li class="earth"></li>
  <li class="mars"></li>
  <li class="jupiter"></li>
  <li class="saturn"></li>
  <li class="uranus"></li>
  <li class="neptune"></li>
</ol>

행성이 순서대로 나열되어 있으므로 순서가 지정된 목록을 사용합니다.

다음으로 기본

스타일을 설정 해제하고 그리드 스타일로 지정합니다.


ol {
  all: unset;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  display: grid;
  width: 100%;
}

이제 행성 궤적을 위해 "그리드 스택"을 사용하겠습니다. 위치: 절대 및 여러 번역 대신 다음을 사용하여 모든 그리드 항목을 간단히 스택할 수 있습니다.


li {
  grid-area: 1 / -1;
  place-self: center;
}

행성당 --d-변수(직경에 대해)를 설정하고 width: var(--d);를 사용하여 다음을 얻습니다.



멋지네요! ::after 의사 요소:
를 사용하여 행성을 추가해 보겠습니다.

li::after {
  aspect-ratio: 1 / 1;
  background: var(--b);
  border-radius: 50%;
  content: '';
  display: block;
  width: var(--w, 2cqi);
}

ChatGPT에 각 행성에 대해 멋진 방사형 그라데이션을 생성하도록 요청해 보겠습니다. 그 동안 우리가 태양계를 생성하고 있다고 말하고 행성 크기를 1에서 6cqi 사이로 요청해 보겠습니다. 정확하지만 상당한 크기의 인식 가능한 차이를 유지함:


.mercury {
  --b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%);
  --w: 2.0526cqi;
}

.venus {
  --b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%);
  --w: 2.6053cqi;
}

.earth {
  --b: radial-gradient(circle, #3a82f7 0%, #2f9e44 80%, #1a5e20 100%);
  --w: 3.1579cqi;
}

.mars {
  --b: radial-gradient(circle, #e57373 0%, #af4448 100%);
  --w: 3.7105cqi;
}

.jupiter {
  --b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%);
  --w: 4.8158cqi;
}

.saturn {
  --b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%);
  --w: 5.3684cqi;
}

.uranus {
  --b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%);
  --w: 4.2632cqi;
}

.neptune {
  --b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%);
  --w: 6cqi;
}

이제 다음과 같은 이점이 있습니다.



다양한 궤도 속도를 가진 행성을 애니메이션하기 위해 다음을 추가합니다.


li::after {
  /* previous styles */
  animation: rotate var(--t, 3s) linear infinite;
  offset-path: content-box;
}

오프셋 경로에 주목하세요. 이것이 궤적 애니메이션을 단순화하는 핵심입니다.

1. 이것은:
   

   @keyframes rotate {
     to {
       offset-distance: 100%;
     }
   }
   

   그리고 그게 전부입니다! 저는 ChatGPT에 "Neptune"을 기준으로 회전 속도가 20초인 타이밍을 계산해 달라고 요청했습니다. 결과는 다음과 같습니다.

   ---

   결론

   몇 가지 규칙만 사용하여 순수 CSS로 태양계의 간단한 2D 버전을 만들었습니다. 더 깊이 알아보고 싶다면 다음을 수행할 수 있습니다.

   • 실제 거리와 크기 사용(calc() 사용)
   • 의사 3D로 만들려면:

     

     ... 어쩌면 Matrix3D를 사용하여 행성을 "다시 평평하게" 할 수도 있을까요?

     즐거운 코딩하세요!

     위 내용은 CSS의 태양계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!