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

html-css031

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

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

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

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

特别说明:

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