둥근 단추 가리 키기 효과

Question

단추에 대한 좋은 효과를 발견했으며이를 내 웹 사이트 중 하나에서 구현하고 싶습니다. 누구든지이 효과를 구현할 (무료) jquery 파일을 찾을 수있는 위치를 알고 있습니까? 그것은 경계가 원형 :)에 확장 나타나는 첫 번째 효과의

http://tympanus.net/Development/IconHoverEffects/

Answer 1

tympanus에이 예를 들어, CSS3 전환 대신 JQuery와 플러그인을 사용하면 해결할 수있는 좋은 방법을 찾고되지 않습니다 그래서 문제가 있다면 CSS3 전환을 직접 사용하여 애니메이션을 만드는 방법을 확인하는 것이 좋습니다.

편집 : CSS3 tutorial with w3schools

편집 : 외부 원을 표시 의사 요소 후 : 내가 사용 규칙을 추가 한 Another tutorial of CSS-tricks

.icon { 
    background: rgb(0, 0, 0); 
    color: rgb(255, 255, 255); 
    transition: background 0.2s, color 0.2s; 
    -moz-transition: background 0.2s, color 0.2s; 
    -webkit-transition: background 0.2s, color 0.2s; 
} 

.icon:hover { 
    background: rgb(255, 255, 255); 
    color: rgb(0, 0, 0); 
} 

.icon:after { 
    pointer-events: none; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    content: ''; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    top: -7px; 
    left: -7px; 
    padding: 7px; 
    box-shadow: 0 0 0 4px #fff; 
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; 
    -webkit-transform: scale(.8); 
    -moz-transition: -moz-transform 0.2s, opacity 0.2s; 
    -moz-transform: scale(.8); 
    -ms-transform: scale(.8); 
    transition: transform 0.2s, opacity 0.2s; 
    transform: scale(.8); 
    opacity: 0; 
} 

.icon:hover:after { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    opacity: 1; 
} 

! 정보를 위해, 아이콘 자체는 ​​: before 의사 요소를 사용합니다. 예를 들어, font-awesome

Answer 2

이 예제에서는 jquery를 사용하지 않습니다.

CSS를 제거하고 자신의 ID/클래스에 적용해야합니다. 또는 자신의 CSS 파일 &을 사용할 때와 동일한 클래스를 사용할 수 있지만 사이트의 다른 스타일과 충돌 할 수있는 내용이있을 수 있습니다.