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

html-css06

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

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

在HTML中插入图像：

<body><img src="..路径../xx.gif" /></body>

在CSS中插入背景图像：

*{background-image:url(..路径../xx.gif)}

gif图片可以用ps打开，也可以用window自带的图片和传真查看器打开，实在不行用浏览器（IE或者Firefox等等）也可以。

.css文件控制网页页面显示效果，.js属于交互脚本，.gif、.jpg属于图片素材，主要是Html网页文件。

主体内容都在Html网页文件里面，图片单另一个图片文件，网页的显示效果由css文件控制，js控制脚本。只需要打开Html网页文件即可，其它自动关联。也可以手动关联，但是需要懂网页源代码，这个需要专业！

特别说明：

如果没有Html网页文件，其它的css、js等等文件都没用，你保存的网页也相当于删除了！通常删除Html网页文件，其它文件会同步删除。