분류 css

호버-CSS 기반 호버 효과의 멋진 모음

컨텐츠 정보

  • 조회 179 (작성일 )

본문

링크, 버튼, 로고, SVG, 추천 이미지 등에 적용 할 CSS3 기반 호버 효과 모음입니다. 자신의 요소에 쉽게 적용하거나 수정하거나 영감을 얻기 위해 사용하십시오. CSS, Sass 및 LESS에서 사용할 수 있습니다.


https://github.com/IanLunn/Hover 

http://ianlunn.github.io/Hover/


Demo | Tutorial 


사용하는 방법 


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 

  • demo-page.css-호버를 시연하는 스타일이 들어 있습니다. 프로젝트에 필요하지 않습니다
  • hover-min.css-축소 / 생산 버전의 Hover.css
  • hover.css-Hover.css의 개발 버전

scss/less 

  • 효과-분류 된 폴더로 정렬 된 각 개별 효과를 포함합니다.
  • _hacks.scss / _hacks.less, _mixins.scss / _mixins.less, _options.scss / _options.less - Sass / LESS Utilities
  • hover.scss / hover.less-Sass 및 LESS 버전의 Hover.css 개발 버전

기타


다른 참고 파일은 다음과 같습니다.