CSS 부채꼴 호버 애니메이션 효과

소개

이 프로젝트에서는 CSS 를 사용하여 부채꼴 효과를 만드는 방법을 배우게 됩니다. 일련의 div 요소를 회전하고 크기를 조정함으로써, 사용자가 요소 위에 마우스를 올리면 확장되는 역동적이고 시각적으로 매력적인 애니메이션을 구현할 수 있습니다.

👀 미리보기

🎯 과제

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

• CSS 변환 (transforms) 을 사용하여 div 요소를 회전하는 방법
• 부채꼴 확장 효과를 만들기 위해 div 요소의 크기를 조정하는 방법
• 원하는 애니메이션을 구현하기 위해 여러 요소의 회전과 크기 조정을 조율하는 방법

🏆 성과

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

• CSS 변환 (transforms) 을 사용하여 요소를 회전하고 크기를 조정할 수 있습니다.
• CSS 를 사용하여 동적인 호버 효과를 만들 수 있습니다.
• 특정 시각 효과를 얻기 위해 여러 요소의 애니메이션을 조율할 수 있습니다.

프로젝트 구조 설정

시작하려면 오른쪽의 편집기를 엽니다. 편집기에서 index.html과 style.css 두 개의 파일을 볼 수 있습니다.

오른쪽 하단의 "Go Live"를 클릭하여 포트 8080 을 열고 브라우저에서 index.html 페이지를 미리 봅니다. 마우스를 요소 위에 올리면 요소가 확장되지 않으며, 효과는 다음과 같습니다:

Div 요소 회전

이 단계에서는 페이지의 12 개 div 요소를 회전하여 부채꼴 효과를 만드는 방법을 배우게 됩니다.

1. 편집기에서 style.css 파일을 엽니다.
2. 다음 CSS 규칙을 파일에 추가합니다:

#box:hover div:nth-child(6) {
  transform: rotate(-10deg);
}

#box:hover div:nth-child(5) {
  transform: rotate(-20deg);
}

#box:hover div:nth-child(4) {
  transform: rotate(-30deg);
}

#box:hover div:nth-child(3) {
  transform: rotate(-40deg);
}

#box:hover div:nth-child(2) {
  transform: rotate(-50deg);
}

#box:hover div:nth-child(1) {
  transform: rotate(-60deg);
}

#box:hover div:nth-child(7) {
  transform: rotate(10deg);
}

#box:hover div:nth-child(8) {
  transform: rotate(20deg);
}

#box:hover div:nth-child(9) {
  transform: rotate(30deg);
}

#box:hover div:nth-child(10) {
  transform: rotate(40deg);
}

#box:hover div:nth-child(11) {
  transform: rotate(50deg);
}

#box:hover div:nth-child(12) {
  transform: rotate(60deg);
}

이 규칙은 처음 6 개의 div 요소 (id="item1"~id="item6") 를 최소 회전 각도 10 도, 인접 요소 간 10 도 차이로 시계 반대 방향으로 회전시킵니다. 다음 6 개의 div 요소 (id="item7"~id="item12") 는 최소 회전 10 도, 인접 요소 간 10 도 차이로 시계 방향으로 회전합니다.

3. style.css 파일을 저장합니다.
4. 브라우저로 돌아가 페이지를 새로 고칩니다. 이제 요소 위에 마우스를 올리면 부채꼴 효과를 볼 수 있습니다.

요약

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