마우스 오버 시 회전을 통해 애니메이션 효과 생성

커서 위치를 기반으로 회전 메커니즘을 설정합니다. 

이 튜토리얼 전반에 걸쳐: 

1. 올바른 관점을 확립하라
2. 트리거링 요소 생성
3. 회전 운동 애니메이션
4. 기본 상태 설정
5. 강조를 위한 특수 효과 추가

올바른 관점을 확립하라

1. 애니메이션 대상 요소의 상위 요소가 선택되어 있는지 확인하세요.
2. 내 스타일 패널 아래에 전환 및 변형, 수정 어린이 관점 1000픽셀까지

트리거링 요소 생성

1. 트리거로 사용할 특정 요소(예: 카드)를 선택하세요.
2. 에서 상호 작용 패널, 근처에 있는 추가 기호를 클릭하세요. 선택한 요소에 그리고 선택 요소 위에서 마우스 이동 드롭다운 메뉴에서

회전 운동 애니메이션

1. 액세스 상호 작용 패널 > 마우스 움직임에 대해 > 행동 > 마우스 애니메이션 시작
2. 옆에 있는 더하기 기호를 클릭하세요. 마우스 애니메이션
3. 이름을 지정합니다(예: 호버 회전).
4. 타임라인 아래의 더하기 기호를 클릭하세요. 마우스 X 동작 0%에서 선택 회전
5. 에서 회전 섹션에서 y축을 -5도로 조정합니다.
6. 선택 카드 요소 100% 및 회전 필드에서 y축을 5도로 변경합니다.
7. 을 추가하다 회전 아래의 조치 마우스 Y 동작
8. 0%에서 회전, x축을 5도로 설정합니다.
9. 100%에서 회전, x축을 -5도로 설정합니다.
10. 애니메이션 조정을 완료하여 스무딩

기본 상태 설정

1. 에서 상호 작용 패널 아래에 마우스 움직임에 대해, 마우스 X 위치를 50%로 정의
2. 마우스 Y 위치를 50%로 설정

강조를 위한 특수 효과 추가

1. 새로 배치 Div 블록 해당 요소(카드) 내의 캔버스에
2. 만들기 수업 이름을 지정합니다(예: 카드 강조 표시).
3. 크기(예: 400픽셀)와 위치를 절대값으로 설정합니다.
4. 왼쪽 상단부터 배치하세요.
5. 적합한 것을 선택하십시오 배경색 (예: 흰색)
6. 수정하다 반지름 아래에 국경 50%로
7. 조정하다 불투명 10% 이하 효과
8. 적용하다 흐림 필터링하고 변경 반지름 50픽셀까지
9. 에서 상호 작용 패널, 선택하다 호버 회전
10. 에서 마우스 X 타임라인 0%에 다음을 포함하세요. 이동하다 애니메이션을 만들고 x축을 100%로 설정합니다.
11. 에서 마우스 X 타임라인 100%에 이동하다 x축이 -50%로 설정된 애니메이션
12. 에 대한 마우스 Y 타임라인 0%에서 통합 이동하다 애니메이션을 적용하고 y축을 50%로 조정합니다.
13. 100%에서 마우스 Y 타임라인, 적용 이동하다 애니메이션을 적용하고 y축을 -50%로 수정합니다.

미리보기 모드에서 진행 상황을 검토하세요.