【51CTO 新鲜译文】 谷歌近来一直在尝试将各种新概念加入到其主页上的主题栏当中，而谷歌如何的主题栏中实现各类创意也早已不是秘密。不过今天，他们抛出了更为天马行空的创意：在主页上实时记录整个月食过程。
谷歌主页月食图案
近十年以来持续时间最长的一次月食当初也是由谷歌在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脚本。
- <div id="moon" style="background-image: url(http://www.google.com/logos/2011/eclipse/strip.jpg?cache=1308164511);
- background-position: 0px 0px; "></div>
- <div id="moon" style="background-image: url(http://www.google.com/logos/2011/eclipse/strip.jpg?cache=1308164511);
- background-position: -2912px 0px; "></div>
5.月食实时状况播放器
月食状况播放器
这款实时播放器能够帮助我们通过拖动进度条来以观察不同阶段的月食状况。播放器本身非常简单，只需制作一个能够动态演示月球变化进程的脚本即可。
我们将一直与大家分享谷歌主题栏的制作心得。如果大家感兴趣，欢迎来我们的Facebook及Twitter以获取***的信息。
原文链接：
http://devlup.com/html5/google-livestreaming-lunar-eclipse-doodle-how-did-they-do/2165/
【编辑推荐】
