悬停动画背景位置

-2

任何人都可以给我一些建议; 关于在悬停时创建具有动画背景位置按钮的最佳方式。悬停动画背景位置

喜欢这个页面上的按钮，关于我们，进行捐赠等

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

您的输入非常感谢。

来源

2014-11-21 Rico Shaft

你尝试过什么呢？我们的想法是我们帮助你，而不是为你做。 – haxtbh 2014-11-21 14:44:51

我不是要你这样做。我在问最好的方法来做到这一点？ – 2014-11-21 14:47:32

我想用javascript来做，但我不知道如何。我可以使用CSS动画轻松完成@keyframes animatedBackground { \t from {background-position：0 0; } \t to {background-position：100％0; } } – 2014-11-21 14:57:23

你可以利用一些CSS3动画来实现这一点。

这样做的一种方法如下。在Chrome浏览器等基于webkit的浏览器中查看此片段。您可以通过添加供应商前缀和标准适配器来适应跨浏览器。

段：

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>

来源

2014-11-21 14:59:01 Abhitalks

悬停动画背景位置

回答

相关问题