Question

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

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

Answer 1

这部分是HTML5：

他们使用跨浏览器精灵技术 - 一个具有多个场景的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>

这是堆栈中的好例子：How to show animated image from PNG image using javascript? [ like gmail ]

<强>更新： 2.他们还使用HTML5画布来制作具有交互效果的动画部分 - 例如气泡。

Google如何设置徽标动画？

1 个答案: