eclipse 애니메이션
Coddy의 일식 애니메이션 | HTML/CSS 프로젝트 코스 레슨 — 10개 중 9번째.
챌린지
쉬움CSS 파일에서 @keyframes를 사용하여 애니메이션을 만드세요:
- 애니메이션 이름을 "eclipse-animation"으로 지정합니다.
0%,50%,100%세 개의 keyframes-selector를 추가합니다.0% keyframes-selector에 CSS 스타일을 추가합니다:
1. box-shadow를
none으로 설정합니다.2. transform을
translate(-30px, 30px) scale(0.9)으로 설정합니다.50% keyframes-selector에 CSS 스타일을 추가합니다:
1. transform을
translate(0px, 0px) scale(1.02)으로 설정합니다.2. box-shadow를
0 0 10px #f9f3f2, 0 0 80px 8px #C7938B으로 설정합니다.3. background-color를
#efdbd8으로 설정합니다.100% keyframes-selector에 CSS 스타일을 추가합니다:
1. transform을
translate(30px, -30px) scale(0.9)으로 설정합니다.2. box-shadow를
none으로 설정합니다.
잘 모르겠다면 힌트를 참고하세요. 이 단계를 마치면 달이 움직이는 것을 볼 수 있습니다!
움직이지 않는다면 솔루션을 참고하세요...
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>