Animation 谷歌如何制作他们的标识？

我一直在试图弄清楚，自从前一次粒子爆炸以来，谷歌是如何为他们的徽标制作动画的。今天，他们要庆祝罗伯特·本森诞辰200周年

---

我假设这是HTML5（我使用的是Firefox 4、Chrome和Safari 5），但有人能确认是否有，以及是否有关于如何制作这些类型动画的好教程吗？

这部分是HTML5：

他们使用跨浏览器的精灵技术-一个PNG图像和多个场景 他们剪辑一个场景的区域并显示它。要显示下一个场景，它们只需移动剪辑区域“开始偏移”

只需检查Firebug：图像被设置为div标签的背景，高度正好是一个场景的高度，然后它们移动Y偏移量和背景“移动”-就像电影磁带：）

下面是代码片段（Google（C）），注意-380px和-570px：

 <div style="background: url("/logos/2011/bunsen11-hp-sprite.png")
 no-repeat scroll 0pt 
-380px transparent; height: 190px; opacity: 0.3;
 position: absolute; width: 465px; z-index: 20;"></div>

 <div style="background: url("/logos/2011/bunsen11-hp-sprite.png")
 no-repeat scroll 0pt
-570px transparent; height: 190px; opacity: 0.3;
 position: absolute; width: 465px; z-index: 20;"></div>

下面是stack中一个很好的DIY示例：

更新：

---

2.他们还使用HTML5画布制作部分具有交互效果的动画，例如气泡。

这是firebug的作品：如果你使用firebug删除页面中的画布元素，你会注意到剩下的唯一动画是最小的，它只会改变背景图像的透明度。这很酷，谢谢你指出这一点。但是他们如何让本生火焰上升和下降，气泡快速移动等等。这取决于你的光标在屏幕上的位置-当然是HTML 5对吗？Yasser&Osu，你是对的，但无论如何，你可以使用我提到的技术制作任何动画交叉浏览器。HTML5可能共同参与实现这些交互元素。