使用CSS3 animation模拟gif动画,解决部分浏览器gif图卡顿问题

html-css08

使用CSS3 animation模拟gif动画,解决部分浏览器gif图卡顿问题,第1张

网页中使用gif动态图时,部分IE浏览器会出现动画不流畅的效果,体验很不好。故可以考虑使用CSS3 animation来控制动画播放,避免使用gif动态图。其实际原理为,把动态图拼接成当行排列的雪碧图,通过CSS3 animation控制雪碧图的移动速度,进而模拟gif的图片播放效果。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置

优点:利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因。

gif图像文件的数据是经过压缩的,而且是采用了可变长度等压缩算法。gif格式的另一个特点是其在一个gif文件中可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。

gif,是多色图像展示,广告,闪图等多用展现。而CSS Sprites是把多张图片组合减少网络缓冲的,两者没有冲突。

方法一:用作图工具缩小图片的大小。

方法二:先把图片放到导航的位置,设置为图片格式,然后设置大小。如下:

<div><img src="xx.gif"/></div>

把这个div和你做的li标签导航条放到一个div里面,然后把导航条的div通过定位,定位到图片上方。

建议第一种方法。