Может ли кто-нибудь дать мне несколько советов; на лучший способ создать кнопки с анимированным фоном позиции на hover.Анимация фонового положения при зависании
Как кнопки на этой странице, о нас, сделать пожертвование и т.д.
http://nationallgbtmuseum.org/#/home/
большое спасибо за ваш вклад.
Для достижения этой цели вы можете использовать некоторую анимацию CSS3.
Один из способов сделать это ниже. Просмотрите этот фрагмент в браузере на основе webkit, таком как 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>
Вы пробовали что-нибудь вообще? Идея заключается в том, что мы помогаем вам в том, что у вас есть, а не для вас. – haxtbh
Я не прошу вас это делать. Я спрашиваю, как это сделать? –
Я хотел бы сделать это с помощью javascript, но я понятия не имею, как это сделать. Я могу сделать это легко с помощью анимации CSS @keyframes animatedBackground { \t from {background-position: 0 0; } \t до {background-position: 100% 0; } } –