moon 클래스 가상 요소

Coddy의 일식 애니메이션 | HTML/CSS 프로젝트 코스 레슨 — 10개 중 8번째.

챌린지

쉬움

CSS 파일에서 moon 클래스를 대상으로 ::before 의사 요소를 사용하고 다음을 수행하세요.

이 요소의 content를 "" (빈 문자열)로 설정합니다.
background-color를 rgba(0, 0, 0, 0)로 설정합니다.
border-radius를 50%로 설정합니다.
z-index를 -1로 설정합니다.
width와 height를 100%로 설정합니다.
position을 absolute로 설정하고 display를 block으로 설정합니다.
3.2s마다 linear, infinite, alternate 상태로 실행되는 "eclipse-animation"이라는 이름의 애니메이션을 추가합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

일식 애니메이션 | HTML/CSS 프로젝트의 모든 레슨

1HTML

무엇을 만들게 될까요?코드 설정 달 컨테이너

2CSS

moon 클래스 가상 요소 프로젝트 레슨

eclipse 애니메이션

반응형