마우스 오버시 배경 위치 애니메이션하기

Question

누구든지 내게 조언을 해줄 수 있습니까? 호버 위에서 애니메이션 배경 위치가있는 버튼을 만드는 가장 좋은 방법은 입니다. 이 페이지의 버튼처럼

는 우리에 대해, 기부 등 귀하의 입력을위한

http://nationallgbtmuseum.org/#/home/

많은 감사합니다.

Answer 1

이를 달성하기 위해 일부 CSS3 애니메이션을 사용할 수 있습니다.

이렇게하는 한 가지 방법은 다음과 같습니다. Chrome과 같은 웹킷 기반 브라우저에서이 스 니펫을 확인하십시오. 벤더 - 접두어와 표준 접두어를 추가하여 크로스 브라우저에 맞게 조정할 수 있습니다.

니펫 :

div { 
 
    width: 240px; height: 240px; 
 
    border: 1px solid gray; 
 
    background-image: url(http://placehold.it/32/32); 
 
    background-position: -640px 640px; 
 
} 
 
div:hover { 
 
    -webkit-animation-duration: 20s; 
 
    -webkit-animation-name: anim; 
 
    -webkit-animation-timing-function: linear ; 
 
    -webkit-animation-iteration-count: infinite; 
 
} 
 

 
@-webkit-keyframes anim { 
 
    0% { background-position: -640px 640px; } 
 
    100% { background-position: 640px -640px; } 
 
}

<div></div>