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

html-css012

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

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

这个是利用{ transform:rotate()} 设置旋转,旋转多少度决定圈数,时间和平缓度(变化模式)在动画里设置,另外你要设置一下你的旋转中心,把旋转中心设置到你规定的圆的圆心(transform-origin)。这样就可以让它们围绕这个中心点旋转了。