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

html-css010

使用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的情况下，您直接插入4张图片，比如：

<img src="1.gif" alt="1.gif" />

<img src="2.gif" alt="2.gif" />

<img src="3.gif" alt="3.gif" />

<img src="4.gif" alt="4.gif" />

它们就是在同一行显示的

-----补充-----

你贴的代码不能说明问题。

如果图片不能在一行显示，一般来说原因如下：

1.包含图片的容器宽度太小

2.图片的显示模式设置为了块级display:block