버튼이나 링크에 마우스를 올렸을 때 적용할 수 있는 여러 애니메이션 효과를 제공하는 라이브러리입니다.
다양한 버튼 애니메이션을 구현해주며, 버튼 제작시 참고용으로도 괜찮은거 같습니다.
https://ianlunn.github.io/Hover/
Hover.css - A collection of CSS3 powered hover effects
ianlunn.github.io
설치방법
사용하려면 먼저 라이브러리를 포함시켜야 합니다. 두 가지 방법으로 사용할 수 있습니다:
(1) CDN으로 포함하기
HTML 파일의 <head> 섹션에 아래 코드를 추가하여 Hover.css를 CDN으로 불러올 수 있습니다.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
</head>
(2) 직접 다운로드하여 사용하기
- https://github.com/IanLunn/Hover 에서 파일을 다운로드합니다.
- 프로젝트에 hover.css 파일을 포함시킵니다.
- HTML 파일에 해당 CSS 파일을 링크합니다.
<head>
<link rel="stylesheet" href="path/to/hover.css">
</head>
사용방법
Hover.css는 클래스 기반으로 작동합니다. 원하는 HTML 요소에 hvr-로 시작하는 클래스를 추가하면 애니메이션이 적용됩니다. 예를 들어, 버튼에 호버 효과를 적용하려면 다음과 같이 할 수 있습니다.
예시
<button class="hvr-grow">Hover Me</button>
다른 효과를 적용하려면 Hover.css 문서에서 제공하는 다양한 클래스 이름을 사용하면 됩니다.
- hvr-bounce-in: 바운스하며 나타나는 효과
- hvr-float: 요소가 떠오르는 느낌을 주는 효과
- hvr-shrink: 요소가 작아지는 효과
728x90
