CSS 로 지구 공전 애니메이션 만들기

소개

이 프로젝트에서는 태양 주위를 공전하는 지구를 시뮬레이션하는 CSS 애니메이션을 만드는 방법을 배우게 됩니다. 이 프로젝트는 CSS 애니메이션의 개념과 이를 동적이고 시각적으로 매력적인 웹 경험을 만드는 데 적용하는 방법을 이해하는 데 도움이 될 것입니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

• .earth-con 요소에 대한 애니메이션 설정 방법
• orbit 애니메이션에 대한 @keyframes를 사용하여 중심 주위를 도는 지구의 회전을 만드는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

• 태양 주위를 공전하는 지구를 시뮬레이션하는 CSS 애니메이션 생성
• CSS 애니메이션의 개념을 이해하고 이를 동적이고 시각적으로 매력적인 웹 경험을 만드는 데 적용
• 원하는 애니메이션 효과를 얻기 위해 여러 CSS 속성을 조정

프로젝트 구조 설정

시작하려면 실험 환경을 열고, 디렉토리 구조는 다음과 같습니다.

├── css
│   └── style.css
└── index.html

여기서:

• index.html은 메인 페이지입니다.
• css/style.css는 코드를 추가해야 하는 CSS 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 페이지를 수동으로 새로 고쳐 브라우저에서 다음 효과를 확인합니다.

애니메이션 설정

이 단계에서는 css/style.css 파일에서 .earth-con 요소에 애니메이션을 추가하는 방법을 배우게 됩니다.

1. 코드 편집기에서 css/style.css 파일을 열고, 코드의 맨 아래로 스크롤하면 orbit이 이미 주어진 @keyframes 규칙임을 확인할 수 있으며, 이 @keyframes 규칙은 애니메이션 시퀀스를 정의합니다.

2. CSS 파일에서 .earth-con 클래스를 찾습니다.

3. .earth-con 클래스 내에서 다음 CSS 속성을 추가하여 애니메이션을 정의합니다.

   animation: orbit 36.5s linear infinite;
   

   • animation-name: orbit
   • animation-duration: 36.5s
   • animation-timing-function: linear
   • animation-iteration-count: infinite

이렇게 하면 .earth-con 요소가 화면 중앙을 중심으로 회전하여 태양 주위를 도는 지구의 공전을 시뮬레이션합니다.

4. style.css 파일을 저장합니다.
5. 브라우저로 돌아가 페이지를 새로 고칩니다. 다음 효과가 표시되어야 합니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.