Google如何设置徽标动画？

Question

我一直在试图弄清楚自从粒子爆炸以来谷歌如何制作他们的标志,今天他们有一套化学组来庆祝罗伯特本森诞辰200周年.

我假设这是HTML5(我使用的是Firefox 4,Chrome和Safari 5),但任何人都可以确认是否这样以及是否有关于如何进行这些类型的动画的任何好的教程？

Answer 1

这部分是HTML5:

1. 他们使用跨浏览器精灵技术 - 一个具有多个场景的PNG图像.

它们剪切一个场景的区域并显示它.为了显示下一个场景,他们只是移动剪裁区域开始偏移

只需查看Firebug:图像被设置为div标签的背景,高度恰好是一个场景,然后他们移动Y偏移和背景"移动" - 就像电影胶带:)

这是片段(谷歌(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>

这是堆栈中的好例子:如何使用javascript从PNG图像显示动画图像？[比如gmail]

更新:2.他们还使用HTML5画布生成具有交互式效果的动画部分 - 例如气泡.