html css Gif 动画

Question

我有一个 .gif 播放动画一次。它不循环，我也不希望它循环。

我有 2 张图片，(“1 张 png”和“1 张 gif 动画”)

我希望每当鼠标悬停在 png 图像上时，gif 就会播放。

我的问题是，当我将鼠标定位在 png 图像上时，gif 播放一次并停止。当我将鼠标移开然后移回图像上方时，它不再播放。

我的 CSS 代码:

#icon{
 float: left;
 width:50px;
 height:50px;
 background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent;
}
#icon:hover{
float: left;
width:50px;
height:50px;
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent;
}

#icon 是一个 DIV

Answer 1

默认情况下，您无法控制 GIF 的循环播放或动画。浏览器将按原样播放 GIF。

因此默认情况下，无法确定 GIF 应该播放的时间或时间。

解决方案有以下三种:
1. 将 img 的 src 替换为 data:image，以便内嵌 GIF。每当 src 更改时，GIF 将再次播放。使用内联 GIF 而不是真实 URL，无需重新下载 GIF，从而节省时间。参见 http://www.websiteoptimization.com/speed/tweak/inline-images/举个例子
2.如评论和其他答案中所述，您可以将 img 标签的 src 替换为相同的 GIF，但在 URL 后添加一个附录(如 ?someRandomNumber=1345)，以便重新下载 GIF 并再次播放.缺点是GIF会重新下载。
3. 你使用类似 http://slbkbs.org/jsgif/ 的东西通过 AJAX 下载 GIF，然后使用 Canvas 元素绘制它，并对其进行完全控制...