html css Gif动画 [英] html css Gif Animation

问题描述

我有一个.gif动画播放一次.它不会循环，我也不想循环.

I have a .gif playing the animation once. It's doesn't loop and I don't want it to loop.

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

I have 2 images, ("1 png" and "1 gif animated")

我希望每次当鼠标移到png图像上时，gif都会播放.

I want that every time when the mouse is over the png image, the gif plays.

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

My problem is that when I set my mouse positon over the png Image, the gif play one time and stop. When I move the mouse away and then move it back over the image, it doesn't play anymore.

我的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.

By default, you can't control the GIF's looping or animation. The browser will just play the GIF as is.

因此，默认情况下，无法说出é声或GIF播放多长时间.

So by default, it is impossible to say whén or how long the GIF should play.

有三种解决方案:
1.用data:image替换img的src，以便内联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元素绘制它，并对其完全控制...

There are three solutions:
1. You replace the src of the img with a data:image so you inline the GIF. Whenever the src changes, the GIF will play again. Using the inline GIF instead of a real URL, there's no redownloading of the GIF, so that saves time. See http://www.websiteoptimization.com/speed/tweak/inline-images/ for an example
2. Like said in the comments, and other answers, you can replace the src of the img tag with the same GIF but with an appendum to the URL (like ?someRandomNumber=1345) so that it will redownload the GIF and play it again. Downside is that the GIF will be redownloaded.
3. You use something like http://slbkbs.org/jsgif/ to download the GIF via AJAX, then draw it using a canvas element, and have full control over it...

这篇关于html css Gif动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！