有人知道如何创建这种类型的悬停动画效果吗？

Question

嗨我见过这种类型的动画最近使用了很多。我一直试图研究如何实现这一点，并发现像spritely这样的插件，但只是想知道我是否遗漏了某些内容，或者是否有更好的方法来实现这样的效果。

这是我正在谈论的那种动画的一个例子：

http://byassociationonly.com/about/

（橙色圆圈中的图标动画）

任何提示或建议都会很棒。

Answer 1

他们使用css来改变背景图像。当您将div悬停时，背景将切换为animated gif

Answer 2

我查看了网站的源代码，他们是如何通过CSS使用“：hover”来完成的。也可以使用javascript，但我觉得使用CSS会很容易。

CSS代码示例：

#divName{
 background: url(linkToImage);
 background-repeat: no-repeat;
}
#divName:hover{
 background: url(linkToGIF);
 background-repeat: no-repeat;
}