gif图片如何排版

html-css014

gif图片如何排版,第1张

gif图片排版:使用css来设置背景图片同传统的做法一样简单,但相对于传统控制方式,css提供了更多的可控选项,我们先来看看最基本的设置图片的方法。

制作Gif动画简单得只需点几下鼠标:新建一个Gif动画时,首先要做的就是添加图像,按“编辑”菜单中的“添加图像”命令或直接按工具栏上的“+”按钮,从盘中一一选择所需图片文件。

版本:

GIF具有GIF87a和GIF89a两个版本。

一个文件存储一个图像,严格不支持透明像素;GIF87a采用LZW压缩算法,它能够在保持图像质量的前提下将图像尺寸压缩百分之二十到二十五。

GIF89a版本是1989年推出的很有特色的版本,该版本允许一个文件存储多个图像,可实现动画功能,允许某些像素透明。在这个版本中,为GIF文档扩充了图形控制区块、备注、说明、应用程序编程接口4个区块,并提供了对透明色和多帧动画的支持。

①:用css3rotate旋转的话,可以随时修改动画的背景色和旋转速度等,而gif只能重新修改图片再导出,但是有个缺点就是只有safari可以很好地支持,chrome下支持不是很好;

②:在比较复杂的动画,css3rotate需要通过控制多张图片,此时的代码量会很大,而是用gif图的话则不需要过多的代码;

③:在兼容性方面:css3只有高级版本的浏览器才兼容,而gif几乎所有浏览器都能够兼容。

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