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

Question

您好，我最近经常看到这种类型的动画。我一直在尝试研究如何实现这一点并找到了诸如 spritely 之类的插件，但只是想知道我是否遗漏了一些东西，或者是否有更好的方法来实现这种效果。

这是我正在谈论的那种动画的示例：

http://byassociationonly.com/about/

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

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

Answer 1

他们使用 css 来更改背景图像。当您悬停 div 时，背景会切换到 animated gif

Answer 2

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

CSS 代码示例：

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