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

Question

嗨，我最近看到这种类型的动画经常被使用。我一直在努力研究如何实现这一点，并找到像spritely这样的插件，但我只是想知道我是否遗漏了什么，或者是否有更好的方法来实现这种效果。

这里有一个我正在讨论的动画的例子：

http://byassociationonly.com/about/

(橙色圆圈中的图标动画)

任何提示或建议都是很棒的。

Answer 1

我查看了该网站的源代码，以及他们是如何使用":hover“通过CSS实现的。也可以使用javascript，但我觉得使用CSS会容易得多。

CSS代码示例：

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

Answer 2

他们使用css来改变背景图像。将鼠标悬停在div上时，背景将切换到animated gif