Question

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

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

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

谢谢！

Answer 1

除了文件大小问题，这么大的图片可能会导致某些浏览器出现问题，尤其是在图片尺寸最大的iPad上（详见the apple docs）。

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

您可以将它们inline-block置于非常宽的div中并使用延迟加载器插件（或自己编写）。

Answer 2

所以....我喜欢图像方法，原因有两个。首先，您只需要为单个元素（图像）设置动画，这将比在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);
}

如何在css3 / jquery中实现图像的平滑“降雨”？

2 个答案: