호버 애니메이션(베타)

애니메이션은 모든 최신 웹사이트의 핵심 상호작용 기능입니다. 따라서 아이콘, 모양, 이미지 및 텍스트 요소에 대한 효과를 개선했습니다.

 

호버 속성

다음 예제는 이미지 요소의 테두리, 반경, 그림자 및 투명도 속성에 적용된 호버 애니메이션을 보여줍니다.

요소에 따라 호버 시 다음 속성을 설정할 수 있습니다.

• 지속
• 색깔
• 배경
• 국경
• 반지름
• 그림자
• 투명도

 

호버에서 색상을 변경하는 방법

예를 들어 마우스를 가져가면 모양 색상을 변경할 수 있습니다.

1. 추가된 모양 요소를 선택하고 오른쪽 속성 패널로 이동합니다.
2. 호버 애니메이션 확인란을 선택합니다.
3. 호버 탭을 선택합니다.
4. 마우스 오버 시 적용할 색상을 변경합니다.
5. 블록의 아무 곳이나 클릭하여 모양을 선택 취소합니다.
6. 모양을 가리켜 색상 변경을 테스트합니다.

호버에 테두리

호버 테두리를 변경할 수도 있습니다.

호버의 반경

이미지 및 모양의 경우 호버 시 반경을 지정할 수 있습니다.

호버에 그림자

그림자는 또한 호버에서 변경할 수 있습니다.

 

호버 시 투명도

Hover에서 투명도와 상호 작용을 추가할 수도 있습니다.

호버 지속 시간을 변경하는 방법

지속 시간은 기본값에서 호버 상태로 전환되는 시간을 지정합니다.