Hover
2.3.1
링크, 버튼, 로고, SVG, 주요 이미지 등에 적용할 CSS3 기반 호버 효과 모음입니다. 자신의 요소에 쉽게 적용하고 수정하거나 영감을 얻기 위해 사용하세요. CSS, Sass, LESS에서 사용할 수 있습니다.
데모 | 지도 시간
npm install hover.css --savebower install hover --saveHover.css는 다양한 방법으로 사용될 수 있습니다. 자신의 스타일시트에 사용하려는 효과를 복사하여 붙여넣거나 스타일시트를 참조하세요. 그런 다음 효과를 적용하려는 요소에 효과의 클래스 이름을 추가하기만 하면 됩니다.
하나 또는 여러 개의 효과만 사용할 계획이라면 사용자가 css/hover.css 전체를 다운로드할 필요가 없도록 효과를 복사하여 자신의 스타일시트에 붙여넣는 것이 더 좋습니다.
성장 효과를 사용한다고 가정합니다.
Hover.css 다운로드
css/hover.css 에서 Grow CSS를 찾습니다(각 효과의 이름은 위에 설명을 사용하여 지정됩니다).
/* Grow */
. hvr-grow {
display : inline-block;
vertical-align : middle;
transform : translateZ ( 0 );
box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0 );
backface-visibility : hidden;
-moz-osx-font-smoothing : grayscale;
transition-duration : 0.3 s ;
transition-property : transform;
}
. hvr-grow : hover ,
. hvr-grow : focus ,
. hvr-grow : active {
transform : scale ( 1.1 );
}이 효과를 복사한 다음 자신의 스타일시트에 붙여넣으세요.
효과를 표시하려는 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 변수를 사용하여 쉽게 변경할 수 있습니다.
많은 Hover.css 효과를 사용할 계획이라면 전체 Hover.css 스타일시트를 참조하는 것이 좋습니다.
hover-min.css 다운로드css 라는 디렉터리에 hover-min.css 추가하세요.hover-min.css 참조하세요. < head >
< link href =" css/hover-min.css " rel =" stylesheet " >
head >또는 다음과 같이 기존 스타일시트에 참조를 추가할 수 있습니다. (이는 HTML을 편집할 수 없는 WordPress 사용자에게 유용할 수 있습니다.)
@import url ( "hover-min.css" );.hvr-grow 클래스를 추가합니다.Hover.css 효과를 적용하기 전의 예제 요소:
< a href =" # " class =" button " > Add to Basket a >Hover.css 효과를 적용한 후의 예제 요소:
< a href =" # " class =" button hvr-grow " > Add to Basket a >display 속성에 대한 참고 사항요소를 "변환 가능"하게 만들기 위해 Hover.css는 적용되는 모든 요소에 다음을 제공합니다.
display : inline-block;
vertical-align : middle; 이 동작을 재정의하려면 Hover.css에서 위의 CSS를 제거하거나 요소의 display 속성을 변경하세요. CSS 캐스케이드가 적용되도록 Hover.css 선언 다음에 재정의를 선언해야 합니다. 또는 Hover.css의 Sass/LESS 버전을 사용하는 경우 scss/_hacks.scss 또는 less/_hacks.less 에 있는 forceBlockLevel() 믹스인을 제거/주석 처리할 수 있습니다.
변형 가능한 요소에 대한 자세한 내용은 CSS 변환 모듈을 참조하세요.
Hover.css 아이콘을 추가하려면 Hover.css 효과가 적용되는 요소 안에 아이콘 HTML을 배치하세요. 예를 들어:
위 코드에서는 링크 위에 마우스를 올리면 아이콘이 앞으로 이동하도록 하는 hvr-icon-forward 클래스를 링크 요소에 지정했습니다. 아이콘 자체에는 hvr-icon 클래스가 제공되어 이것이 애니메이션하려는 아이콘임을 Hover.css에 알립니다. 이 예에서 아이콘은 FontAwesome의 지침에 따라 웹 페이지의 에 로드한 FontAwesome에서 가져온 것입니다.
< 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만 기본적으로 지원되었습니다.) 예를 들어 다른 아이콘 라이브러리를 사용하거나 대신 다음과 같은 이미지:
여기서 이미지는 hvr-icon 클래스가 적용되어 있기 때문에 아이콘 역할을 하며, 그 위에 마우스를 올리면 아이콘이 상위 요소의 hvr-icon-spin 클래스에 정의된 대로 회전합니다.
아이콘의 위치는 전적으로 귀하가 제어할 수 있습니다. 다음과 같이 텍스트 앞에 배치할 수 있습니다.
또는 사용자 정의 CSS를 사용하여 원하는 대로 아이콘을 배치할 수 있습니다.
프로젝트는 다음 폴더와 파일로 구성됩니다.
기타 참고 파일은 다음과 같습니다.
많은 Hover.css 효과는 전환, 애니메이션, 변형 및 의사 요소와 같은 CSS3 기능을 사용하므로 이전 브라우저에서는 효과가 완전히 작동하지 않을 수 있습니다.
위에서 언급한 브라우저 외에도 Hover.css는 모든 주요 브라우저에서 지원됩니다. 다양한 웹 기술에 대한 전체 지원을 확인하려면 caniuse.com을 참조하고 이에 따라 웹페이지를 테스트하세요. 해당 브라우저에서 지원하는 CSS 또는 Modernizr와 같은 기능 테스트 라이브러리를 사용하여 이전 브라우저에 대체 효과를 적용하는 것이 좋습니다.
그런트는 필수는 아니지만 개발 속도를 높일 수 있습니다. Grunt가 설치된 상태에서 명령줄에서 grunt 실행하여 http://127.0.0.1:8000/ 또는 네트워크 테스트를 위한 로컬 IP에서 액세스되는 개발 서버를 설정하세요. Grunt가 실행되면 Sass 또는 LESS가 전처리되고( scss 또는 less 폴더에서 작업하는지 여부에 따라) CSS 파일이 축소됩니다.
참고: 원래 Grunt는 CSS 속성을 자동 접두사로 설정했지만 프로젝트에 최대한 액세스할 수 있도록 하기 위해 더 이상 그렇지 않습니다. 대신 prefixed(property, value) Sass/LESS 혼합을 브라우저 접두사에 사용해야 합니다. 개발을 위해 Sass/LESS 사용 및 [개발을 위해 LESS 사용]을 참조하세요.
Sass/LESS는 필수는 아니지만 개발 속도를 높일 수 있습니다. 선호하는 소프트웨어나 Grunt를 통해 제공되는 환경을 사용하여 Sass/LESS를 전처리하세요.
Sass/LESS는 Hover.css 프로젝트에서 다양한 CSS를 특정 파일로 분리하는 데 사용됩니다. 각 효과는 effects 디렉토리의 자체 파일 내에 있습니다. Hover.css는 다음 .scss 및 .less 파일도 사용합니다.
특정 효과에 적용되는 핵(바람직하지 않지만 일반적으로 필요한 코드 줄)이 포함되어 있습니다. 해킹은 여기에 설명되어 있습니다.
_options.scss / _options.less 에 지정하는 필수 접두사를 속성 및 키프레임에 적용하는 prefixed 및 keyframes 믹스인이 포함되어 있습니다.
속성에는 다음과 같이 접두사가 붙을 수 있습니다.
@include prefixed(transition-duration , .3s);. prefixed ( transition-duration , .3 s ); prefixed mixin에는 접두사를 추가할 속성과 해당 값이 전달됩니다.
키프레임에는 다음과 같이 접두사가 붙을 수 있습니다.
@include keyframes(my-animation) {
to {
color : red;
}
} keyframes 믹스인에는 키프레임 이름이 전달되고 그 뒤에 @content 지시어를 사용하여 콘텐츠가 전달됩니다.
. keyframes ( my-animation , {
to {
color : red;
}
}); keyframes 믹스인에는 키프레임 이름과 콘텐츠가 모두 인수로 전달됩니다.
기본 옵션, 다양한 효과 옵션 및 접두사가 prefixed 믹스인과 함께 사용하려는 브라우저 접두사가 포함되어 있습니다. 기본적으로 -webkit- 접두사만 true 로 설정됩니다(현재 대부분의 브라우저에서는 접두사가 필요하지 않기 때문).
2.0.0 부터 _options 모든 클래스 앞에 붙는 이름을 변경할 수 있는 $nameSpace / @nameSpace 옵션도 포함되어 있습니다. 기본 네임스페이스는 hvr 입니다.
$includeClasses / @includeClasses 옵션은 기본적으로 true 로 설정되어 있으며 모든 Hover.css 효과를 자체 클래스 이름(예: hvr-grow 으로 생성합니다. Hover.css 효과를 구성하는 속성을 자신의 클래스 이름에 추가하려면 이 옵션을 false 로 설정하세요.
자신만의 효과를 기여하고 싶다면 기여 가이드를 참조하세요.
Hover.css는 귀하의 요구 사항에 따라 무료 개인/오픈 소스 또는 유료 상업용 라이센스로 제공됩니다. 라이센스를 비교하려면 Ian Lunn Design Limited Store를 방문하고 여기에서 상업용 라이센스를 구입하십시오.
개인/오픈 소스 사용을 위해 Hover.css는 MIT 라이센스에 따라 제공됩니다.
전체 라이센스 읽기
상업적 용도의 경우 Hover.css는 상업용, 확장 상업용 및 OEM 상업용 라이센스에 따라 제공됩니다.
구매 | 전체 라이센스 읽기
*최종 사용자가 별도의 애플리케이션을 생성할 수 있는 애플리케이션은 제외됩니다. OEM 상업용 라이센스를 참조하십시오.
구매 | 전체 라이센스 읽기
귀하의 응용 프로그램을 통해 최종 사용자가 Ian Lunn Design Limited의 소프트웨어(예: 개발 도구 키트, 라이브러리 또는 응용 프로그램 빌더)를 통합하는 별도의 응용 프로그램을 생성할 수 있는 경우 OEM 상용 라이센스를 취득해야 합니다. OEM 상업용 라이센스에 대한 자세한 내용은 당사에 문의하십시오.
Hover.css는 이전에 MIT 라이선스에 따라 상업적 및 비상업적 용도로 제공되었습니다. v2.2.0(2017년 3월 24일) 이전에 상업적 용도로 MIT 라이선스를 취득한 사람은 동일한 라이선스에 따라 v2.2.0 이전의 Hover.css 버전을 계속 사용할 수 있습니다.
v2.2.0 이상으로 업그레이드하고 싶거나 Hover.css에 대한 지원을 보여주고 싶다면(정말 감사하겠습니다!) 최신 상용 라이센스를 구입하세요. 상업용 라이센스를 구매하세요.
Ian Lunn은 프리랜서 프런트엔드 개발자이자 CSS3 Foundations의 저자입니다.
반응형 웹사이트, WordPress 웹사이트, JavaScript, 애니메이션 및 최적화를 위해 Ian을 고용하세요.
