링크, 버튼, 로고, SVG, 추천 이미지 등에 적용 할 CSS3 기반 호버 효과 모음입니다. 자신의 요소에 쉽게 적용하거나 수정하거나 영감을 얻기 위해 사용하십시오. CSS, Sass 및 LESS에서 사용할 수 있습니다.
https://github.com/IanLunn/Hover
http://ianlunn.github.io/Hover/
사용하는 방법
Hover.css는 여러 가지 방법으로 사용될 수 있습니다. 자신의 스타일 시트에 사용하려는 효과를 복사하여 붙여 넣거나 스타일 시트를 참조하십시오. 그런 다음 효과의 클래스 이름을 적용하려는 요소에 추가하십시오.
A. 효과 복사하여 붙여 넣기
하나 이상의 효과 만 사용하려는 경우 효과를 자신의 스타일 시트에 복사하여 붙여 넣는 것이 좋습니다. 따라서 사용자는 css / hover.css를 전체적으로 다운로드 할 필요가 없습니다.
성장 효과를 사용한다고 가정합니다.
1. Hover.css 다운로드
2. css / hover.css에서 Grow CSS를 찾으십시오 (각 효과는 위에 주석을 사용하여 이름이 지정됩니다).
/* Grow */ .hvr-grow { display: inline-block; vertical-align: middle; transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; transition-duration: 0.3s; transition-property: transform; } .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { transform: scale(1.1); }
3. 이 효과를 복사 한 후 자신의 스타일 시트에 붙여 넣습니다.
4. 효과를 표시하려는 HTML 파일에서 .hvr-grow 클래스를 선택한 요소에 추가하십시오.
Hover.css 효과를 적용하기 전의 예제 요소 :
<a href="#">Add to Basket</a>
Hover.css 효과를 적용한 후의 예제 요소 :
<a href="#" class="hvr-grow">Add to Basket</a>
참고 : 2.0.0부터는 모든 라이브러리 / 스타일 시트와의 충돌을 방지하기 위해 모든 Hover.css 클래스 이름 앞에 hvr-가 붙습니다. Sass / LESS를 사용하는 경우 scss / _options.scss 또는 less / _options.less의 $ nameSpace / @ nameSpace 변수를 사용하여 쉽게 변경할 수 있습니다.
B. 참조 호버 .css
많은 Hover.css 효과를 사용하려는 경우 전체 Hover.css 스타일 시트를 참조 할 수 있습니다.
1. hover-min.css 다운로드
2. 예를 들어 css라는 디렉토리에서 웹 사이트 파일에 hover-min.css를 추가하십시오.
3. Hover.css 효과를 추가하려는 HTML 페이지의 <head>에서 hover-min.css를 참조하십시오.
<head> <link href="css/hover-min.css" rel="stylesheet"> </head>
또는 기존 스타일 시트에 참조를 추가 할 수 있습니다 (HTML을 편집 할 수 없는 WordPress 사용자에게 유용 할 수 있음).
@import url("hover-min.css");
4. 성장 효과를 사용한다고 가정하고 이 효과를 사용하려는 HTML 파일에서 선택한 요소에 .hvr-grow 클래스를 추가하십시오.
Hover.css 효과를 적용하기 전의 예제 요소 :
<a href="#" class="button">Add to Basket</a>
Hover.css 효과를 적용한 후의 예제 요소 :
<a href="#" class="button hvr-grow">Add to Basket</a>
디스플레이 속성에 대한 참고 사항
요소를 "변형 가능하게"만들기 위해 Hover.css는 적용된 모든 요소에 다음을 제공합니다.
display: inline-block; vertical-align: middle;
이 동작을 무시하려면 Hover.css에서 위의 CSS를 제거하거나 요소의 표시 속성을 변경하십시오. CSS 캐스케이드가 적용되도록 Hover.css 선언 뒤에 재정의를 선언해야 합니다. 또는 Sass / LESS 버전의 Hover.css를 사용하는 경우 scss / _hacks.scss 또는 less / _hacks.less에있는 forceBlockLevel() 믹스인을 제거하거나 주석 처리 할 수 있습니다.
변형 가능한 요소에 대한 자세한 내용은 CSS 변형 모듈을 참조하십시오.
아이콘 효과 사용
Hover.css 아이콘을 추가하려면 Hover.css 효과가 적용되는 요소 안에 아이콘 HTML을 배치하십시오. 예를 들면 다음과 같습니다.
<a href="#" class="hvr-icon-forward">
Icon Forward
<i class="fa fa-chevron-circle-right hvr-icon"></i>
</a>위의 코드에서 링크 요소 위에 hvr-icon-forward 클래스를 지정하여 링크 위에 마우스를 놓으면 아이콘이 앞으로 이동합니다. 아이콘 자체에는 hvr-icon 클래스가 제공되어 Hover.css에 이것이 애니메이션하려는 아이콘임을 알려줍니다. 이 예에서 아이콘은 FontAwesome의 아이콘으로 FontAwesome의 지침에 따라 웹 페이지의 <head> </ head>에 로드됩니다.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
참고 : Hover.css v2.3.0부터는 아이콘을 추가하기 위해 원하는 방법을 사용할 수 있습니다 (이전에는 FontAwesome 만 기본적으로 지원되었습니다). 예를 들어 다른 아이콘 라이브러리를 사용하거나 대신 이렇게 이미지 :
<a href="#" class="hvr-icon-spin">
Icon Spin
<img src="myicon.svg" class="hvr-icon" />
</a>여기서 이미지는 hvr-icon 클래스가 적용되어 아이콘으로 작동하며, 마우스를 올려 놓으면 상위 요소의 hvr-icon-spin 클래스에 의해 정의 된 대로 아이콘이 회전합니다.
아이콘의 위치는 전적으로 귀하의 통제에 있습니다. 텍스트 앞에 다음과 같이 배치 할 수 있습니다.
<a href="#" class="hvr-icon-spin">
<img src="myicon.svg" class="hvr-icon" />
Icon Spin
</a>또는 사용자 정의 CSS를 사용하여 원하는대로 아이콘을 배치하십시오.
무엇이 포함되어 있습니까?
프로젝트는 다음 폴더와 파일로 구성됩니다.
css
scss/less
기타
다른 참고 파일은 다음과 같습니다.
등록된 댓글이 없습니다.
