css - gif 动画设置一次只运行一次

标签 css image animated-gif

我有一张 png 图像和另一张 gif 图像。 gif 图像是由 Photoshop 一次性设置而成。

enter image description here

现在,当我悬停按钮时,background-image 会随着 gif 图像而更改,但如果再次悬停,则会将背景图像更改为 gif 文件,但不会产生动画。

有什么解决办法吗?

demo

最佳答案

由于与其他浏览器的兼容性,在悬停时显示 .gif 并不是解决此问题的最佳方法。也许你可以考虑使用 CSS 动画?这是一个由一些 CSS 关键帧动画组成的很酷的库。

http://daneden.github.io/animate.css/

flipOutX 动画可能非常符合您的需求。

关于css - gif 动画设置一次只运行一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22834926/

相关文章:

javascript - Kintone 时间字段的自定义时间增量

java - 将 ImageOutputStream 转换为 byte[]

java - 将全滚动合成导出到图像

java - JFrame 使用 Alpha channel 绘制动画 gif 图像

c++ - 如何从 C++(winapi) 中的资源加载 GDI::Image (GIF)?

html - ul 元素出现在导航栏中

javascript - jquery ajax 中的动态内容加载

HTML 表格边框和文本溢出

css - 表格数据中 anchor 图像之间的空间

ffmpeg - gifs 在 ffmpeg 电影过滤器中不循环