html css Gif动画

html css Gif动画,第1张

概述我有一个.gif播放动画一次.它不循环,我不希望它循环. 我有2张图片,(“1 png”和“1 gif animated”) 我希望每当鼠标在png图像上时,gif就会播放. 我的问题是,当我将鼠标位置设置在png图像上时,gif会播放一次并停止.当我将鼠标移开然后将其移回图像时,它不再播放. 我的CSS代码: #icon{ float: left; width:50px; height:5 我有一个.gif播放动画一次.它不循环,我不希望它循环.

我有2张图片,(“1 png”和“1 gif animated”)

我希望每当鼠标在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

解决方法 默认情况下,您无法控制GIF的循环或动画.浏览器将按原样播放GIF.

所以默认情况下,不可能说GIF应该播放多久或多长时间.

有三种解决方案:
 1.用数据:image替换img的src,以便内联GIF.每当src改变时,GIF将再次播放.使用内联GIF而不是真实的URL,GIF没有重新下载,因此可以节省时间.有关示例,请参见http://www.websiteoptimization.com/speed/tweak/inline-images/
 2.如评论和其他答案中所述,你可以用相同的GIF替换img标签的src但是带有URL的附加内容(比如?someRandomNumber = 1345),这样它就会重新下载GIF并重新播放.缺点是GIF将被重新下载.
 3.你使用类似http://slbkbs.org/jsgif/的东西通过AJAX下载GIF,然后使用canvas元素绘制它,并完全控制它…

总结

以上是内存溢出为你收集整理的html css Gif动画全部内容,希望文章能够帮你解决html css Gif动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1079092.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存