이 프로젝트에서는 CSS 를 사용하여 애니메이션 시퀀스를 만드는 방법을 배우게 됩니다. 이 프로젝트는 불경을 구하기 위해 서천으로 여정을 떠난 제자들의 이야기를 기반으로 합니다. 그러나 그들은 도중에 악마들에게 붙잡히게 되고, Tom 이라는 캐릭터가 CSS 를 사용하여 그들을 구출하여 제자들이 서쪽으로의 여정을 계속할 수 있게 합니다.
이 프로젝트에서 다음을 배우게 됩니다:
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
시작하려면 실험 환경을 열고, 디렉토리 구조는 다음과 같습니다:
├── css
│ └── style.css
├── images
│ ├── background.webp
│ ├── west_01.png
│ ├── west_02.png
│ ├── west_03.png
│ └── west_04.png
└── index.html여기서:
index.html은 메인 페이지입니다.images는 이미지 폴더입니다.css는 CSS 폴더입니다.WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
브라우저에서 index.html 페이지를 미리 보면 애니메이션이 한 번만 재생되고 멈추는 것을 알 수 있습니다. 페이지 효과는 다음과 같습니다:
이 단계에서는 서천으로 가는 여정 프로젝트에서 캐릭터의 애니메이션 프레임을 설정하는 방법을 배우게 됩니다.
css/style.css 파일을 열면 a1, a2, a3, a4가 제공된 네 개의 @keyframes 규칙임을 알 수 있으며, @keyframes 규칙은 애니메이션 시퀀스를 정의합니다. 이러한 키프레임은 각 캐릭터의 애니메이션을 정의하여 배경 이미지를 가로로 이동시켜 움직임의 환상을 만듭니다..actor:first-child 규칙에서 첫 번째 캐릭터를 애니메이션화하기 위해 다음 코드로 변경합니다:animation: a1 0.8s steps(8) infinite;이렇게 하면 첫 번째 캐릭터의 애니메이션이 무한 루프되고, 각 프레임은 0.8 초 동안 지속되며 애니메이션은 8 단계를 갖게 됩니다.
.actor:nth-child(2) 규칙에서 두 번째 캐릭터를 애니메이션화하기 위해 다음 코드로 변경합니다:animation: a2 0.8s steps(8) infinite;이렇게 하면 두 번째 캐릭터의 애니메이션이 무한 루프되고, 각 프레임은 0.8 초 동안 지속되며 애니메이션은 8 단계를 갖게 됩니다.
.actor:nth-child(3) 규칙에서 세 번째 캐릭터를 애니메이션화하기 위해 다음 코드로 변경합니다:animation: a3 0.8s steps(8) infinite;이렇게 하면 세 번째 캐릭터의 애니메이션이 무한 루프되고, 각 프레임은 0.8 초 동안 지속되며 애니메이션은 8 단계를 갖게 됩니다.
.actor:last-child 규칙에서 네 번째 캐릭터를 애니메이션화하기 위해 다음 코드로 변경합니다:animation: a4 0.8s steps(8) infinite;이렇게 하면 네 번째 캐릭터의 애니메이션이 무한 루프되고, 각 프레임은 0.8 초 동안 지속되며 애니메이션은 8 단계를 갖게 됩니다.
style.css 파일을 저장합니다.이제 브라우저에서 index.html 파일을 미리 보면 캐릭터의 애니메이션이 무한 루프되는 것을 볼 수 있습니다.
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
