如何在 HTML 文档中制作 GIF 动画？

Question

我在静态 HTML 文档中有以下 <img> 标记。

<img src="foo.gif" alt="This is an animated gif image, but it does not move"/>

在我将其 src 属性设置为指向 .gif 文件（即 foo.gif）后，GIF 显示为静态（或非移动）图像。如何为 GIF 制作动画？

Answer 1

默认情况下，浏览器始终播放 gif 动画，您无法更改该行为。如果 gif 图像没有动画，则可以通过两种方式查看：浏览器有问题，图像有问题。然后要排除第一个变体，只需在您的浏览器中检查受信任的图像 （下面的运行片段，这个 gif 绝对动画并且适用于所有浏览器）.

您的代码看起来没问题。你能检查一下这个片段是否为你制作了动画吗？
如果 YES，那么你的 gif 有问题，如果 NO 你的浏览器有问题。

<img src="http://i.stack.imgur.com/SBv4T.gif" alt="this slowpoke moves"  width="250" />

Answer 2

尝试

<img src="https://cdn.glitch.com/0e4d1ff3-5897-47c5-9711-d026c01539b8%2Fbddfd6e4434f42662b009295c9bab86e.gif?v=1573157191712" alt="this slowpoke moves"  width="250" alt="404 image"/>

并用你的来源切换 src。如果 alt 弹出，请尝试不同的 url。如果还是不行，请重启电脑或切换浏览器。

Answer 3

同意 Yuri Tkachenko 的回答。

我想指出这一点。

这是一个非常具体的场景。但它确实发生了。

当您在某些网站（如 google 图片）中完全加载 gif 之前复制它。它只是给出了该 gif 的预览图像地址。这显然不是 gif。

因此，请确保它以 .gif 扩展名结尾

如何在 HTML 文档中制作 GIF 动画？

How to animate GIFs in HTML document?

html

gif

animated-gif