【51CTO 新鲜译文】 谷歌近来一直在尝试将各种新概念加入到其主页上的主题栏当中，而谷歌如何的主题栏中实现各类创意也早已不是秘密。不过今天，他们抛出了更为天马行空的创意：在主页上实时记录整个月食过程。

[[33263]] 

谷歌主页月食图案
 

近十年以来持续时间最长的一次月食当初也是由谷歌在youtube上实时放送的，这一事件同时登上了谷歌的主题栏。现在就让我们回顾一下整套实时放送是如何实现的吧。

当时的主题栏月食图案在概念阐释方面较为直观，因为它是CSS 3脚本与JavaScript脚本协同处理的结果。

1.背景图片

月食主题的背景图案

如大家所见，这是一幅静态图像，中央部分为月亮留出了透明的圆形空缺，并在月食过程中即时加载不同的效果。

2.动态月球影像

与之前利用CSS脚本的做法不同，这一次主题栏会采取动态影像的处理方式。今天我们所看到的实时月球影像，实际上是一系列拍摄间隔较短的实景照片的有序排列。

这些图片是由谷歌拍摄并实时添加到资源库当中的，因此无论大家何时刷新页面，主题栏中出现的总是正确的当前月食情况。

而下面这幅细长的图像则显示了月食发生较长时间之后的情景。很明显月球图案的采集数量增加了，这意味着当前的***情景处于最右侧图片的状态，而动态效果则也是由满月向最右侧的状况转变。

谷歌月食主题中的动态图像（点击图片可看高清图片）

谷歌月食主题中的动态图像（点击图片可看高清图片）
 

调用图像如果仍然用CSS 3脚本动画实现，无疑随着动画长度的增加，文件也会变得相当庞大。

而在月食发生的一百分钟里，谷歌需要保证按时上传当前***的月球图片。在此前的Martha Graham(美国现代舞表演创始人)主题中，所有的舞蹈动作都被描绘在同一幅图片中。但这一次，月食图片需要以动态方式添加及创建。

全部月球实景图都调用自下列网址URL : http://www.google.com/logos/2011/eclipse/strip.jpg?cache=1308162471 且此网址并非固定不变的。

3.动画:

这里我们要说到月食动画。当google.com页面进行载入时，以上所列的图片也将同时在浏览器中进入缓冲状态。当整体缓冲动作结束时，动画随即开始播放。当图片按脚本的安排由左侧向右侧逐幅显示时，动态动画也就呈现出来了。

默认的月球图片(即左侧***幅)会先于其它一系列图片被载入。因此在全部图片都缓冲结束之前，我们不会看到其它帧中的内容。

谷歌主题栏中默认的月球图片

4.编码

其实这里并不涉及太多的编码工作，除了每个坐标点需要载入的CSS 3脚本。

 id="moon" style="background-image: url(http://www.google.com/logos/2011/eclipse/strip.jpg?cache=1308164511);  
 background-position: 0px 0px; ">