0

在我的网站上，我想添加一个关于我们业务的酷/积极的 Facebook 反应的动画流。你可以在这里看到我的第一次尝试：https ://dl.dropboxusercontent.com/u/809252/css3%20animation.mov

到目前为止，我不太好的方法是：创建一个包含所有反应的 2000x4000 png（文件大小为 +3mb -> 坏）。并在循环中为背景位置设置动画。

这个问题的更顺畅的解决方案是什么？无需加载 3mb 图像的解决方案。或者在特定网站上发现类似效果的任何人？

谢谢！

4

2 回答 2

0

除了文件大小问题，如此大的图像可能会在某些浏览器上引起问题，尤其是在具有最大图像尺寸的 iPad 上（有关详细信息，请参阅苹果文档）。

最好将它们分成单独的图像并在它们变得可见之前预先加载它们。

您可以将它们inline-block放置在非常宽的位置div并使用惰性加载器插件（或自己编写）。

于 2013-08-19T16:31:54.243 回答
0

所以....我喜欢图像方法，有几个原因。首先，您只需要为单个元素（图像）设置动画，这将比在 html 中渲染多个框更快/更流畅。

[Bonus] 如果您希望这些消息是动态的（即，您不必自己创建图像），您可以创建一个呈现消息的特殊页面，然后将 PhantomJS 指向它以自动生成 PNG。 ..这带来了另一点：

您应该使用 PNG 作为图像格式。它应该会显着减小图像的大小——可能会减少到 100-500KB，而不是 3MB。

要实现流畅的动画效果，你不应该使用基于JS的动画（即jQuery的传统方法），而应该使用CSS3，并使用一些魔法来触发硬件加速。例如，以下 CSS3 代码片段通常会在选定元素上触发硬件加速：

#myElemToAnimate {
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0);
}
于 2013-08-19T16:32:03.500 回答