模拟谷歌今日使用的css动画

标签: 模拟 谷歌 今日 | 发表时间:2011-05-11 13:13 | 作者:胡尐睿丶 revlekt
出处:http://www.cnblogs.com/

  不知道大家有没有注意到谷歌今天官网上的logo,刚开始一看还以为是gif,在仔细一看,发现并非如此,原来是使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,从而实现了动画效果。

  本人一时手痒,就想把这个扒下来,但发现谷歌的js写的太牛逼了,无奈,只能自己用自己的思维去模拟一个了。首先,需要两张图,分别是:

  当有这两张图后,我们就可以开始模拟了。

  我先通过firebug观察,发现google首页在运行的时候会循环加载以下html代码:

<div id="hplogo0" style="left:307px;top:48px;width:88px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px 0px transparent;"></div>
<div id="hplogo1" style="left:307px;top:48px;width:89px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -88px 0px transparent;"></div>
<div id="hplogo2" style="left:307px;top:48px;width:91px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -177px 0px transparent;"></div>
<div id="hplogo3" style="left:305px;top:49px;width:93px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -268px 0px transparent;"></div>
<div id="hplogo4" style="left:305px;top:50px;width:93px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -361px 0px transparent;"></div>
<div id="hplogo5" style="left:305px;top:50px;width:93px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -454px 0px transparent;"></div>
<div id="hplogo6" style="left:306px;top:52px;width:92px;height:86px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -547px 0px transparent;"></div>
<div id="hplogo7" style="left:305px;top:53px;width:93px;height:84px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -639px 0px transparent;"></div>
<div id="hplogo8" style="left:305px;top:54px;width:94px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -732px 0px transparent;"></div>
<div id="hplogo9" style="left:306px;top:54px;width:93px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -826px 0px transparent;"></div>
<div id="hplogo10" style="left:307px;top:54px;width:92px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -919px 0px transparent;"></div>
<div id="hplogo11" style="left:307px;top:54px;width:92px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1011px 0px transparent;"></div>
<div id="hplogo12" style="left:308px;top:54px;width:90px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1103px 0px transparent;"></div>
...
...

  实际上这就是实现动画效果的因素,但我发现,我可以循环生成,但是我无法循环生成每个div里的样式,因为样式的宽高、偏移像素都是无规律的,所以我的做法就是,把谷歌生成好的代码复制过来,然后默认全部隐藏,然后循环让其显示出来。

  原理就是这样,js的实现也更为简单,所以我就没用jquery,以下是js实现代码:

var i=0;
window.setInterval(google,83);
function google(){
	if(i<=154){
		var logo = document.getElementById("hplogo"+i);
		logo.style.display = 'block';
	}
	i++;
}

  大功告成,看下demo吧。

现代舞先驱玛莎·葛兰姆 117 周年诞辰

  顺便把源码也附上吧,没太多技术含量,如果有问题,希望赐教。源码下载

  附1:后来我发现google原来是把坐标等信息存在js数组里,然后循环添加div元素的时候,把值一并写进去,相关阅读《喜欢今天的Google LOGO 玛莎·葛兰姆

  附2:补充知识

  Google今日涂鸦是为了纪念现代舞先驱玛莎·葛兰姆(Martha Graham,1894年5月11日-1991年4月1日)117周年诞辰,他是美国舞蹈家和编舞家,也是现代舞蹈史的创始人之一。其作品多以美国人文或是希腊古典神话为主题,代表作有《原始的神秘》(Primitive Mysteries,1936年)、《给世界的信》(Letter to the World,1940年)、《阿帕拉契山脈之春》 (Appalachian Spring,1944年)、《夜旅》(Night Journey,1947年)。

作者: 胡尐睿丶 发表于 2011-05-11 13:13 原文链接

评论: 36 查看评论 发表评论


最新新闻:
· Google玩山寨 国际互联网巨头圈地团购(2011-05-11 20:01)
· 谷歌暗示圣诞节推下一代Nexus手机(2011-05-11 19:55)
· NASA被禁止与中国合作(2011-05-11 19:52)
· 微软承诺Skype继续支持iPhone和Android(2011-05-11 19:50)
· Pivot — 创业者最重要的本领(2011-05-11 18:38)

编辑推荐:改善代码设计 —— 优化函数的构成(Composing Methods)

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [模拟 谷歌 今日] 推荐:

模拟谷歌今日使用的css动画

- revlekt - 博客园-首页原创精华区
  不知道大家有没有注意到谷歌今天官网上的logo,刚开始一看还以为是gif,在仔细一看,发现并非如此,原来是使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,从而实现了动画效果.   本人一时手痒,就想把这个扒下来,但发现谷歌的js写的太牛逼了,无奈,只能自己用自己的思维去模拟一个了.

谷歌时惠今日上线

- 丁丁 - Solidot
谷饭 写道 "谷歌时惠(或www.google.cn/shihui)是一个新上线的团购聚合网站,聚合了拉手网、美团网、24券、大众点评团、窝窝团、58团购、糯米网、团宝网、高朋团、满座等网站的团购信息,可以选择团购分类、价格范围以及折扣大小作为信息过滤方式,还可以搜索团购信息.

用谷歌浏览器来当手机模拟器

- satan - 乱弹琵琶playit
很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容. 谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器. 在Windows的【开始】–>【运行】中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页:.

JavaScript PC 模拟器

- kira - LinuxTOY
很难想象竟然用了这么久,Linux 才可以运行在浏览器的 JavaScript 引擎里面,要知道2008 年就可以在土豆上运行了~. 作者 Fabrice Bellard 使用 JavaScript 编写了一个简单的 PC 模拟器,包含32位 x86 兼容 CPU、8259 可编程中断控制器、8254 可编程中断计时器.

今日佳句

- Joe Wang - 延宕与悬置
良知是一个应该被右派牢牢抓在手里的词汇,捍卫自己和他人人身与财产的权利,至少不去侵犯;捍卫契约的价值,至少不主动违反;捍卫法律面前人人平等……这些就是最基本的良知. 一些右派因为看到社民派喜欢吹牛逼,就主动把良知的名号拱手相让,宁可抓一个“经济学”在手头,实在是拣了芝麻丢了西瓜. 的确,这些是植根于人类文明传统中再自然不过的道德准则及其衍生物,遵奉者们完全无需羞愧.

JavaScript Gameboy Color模拟器

- ashuai - Solidot
程序员Grant Galitz发布了一个用HTML5/JavaScript编写的GameBoy Color模拟器(源代码),可以运行储存在本地的ROM镜像,游戏运行速度正常. 也有其他开发者用JavaScript编写出了启动Linux的X86模拟器.

地形模拟演示Demo

- kongshanzhanglao - 博客园-首页原创精华区
地形渲染的首先是创建一个三角网络平面,然后调整平面顶点的y高度值,模拟地面的山丘和山谷,最后再绘制贴图效果. 本文首先介绍如何生成三角网络平面. 然后介绍如何通过高度图调整平面高度. 以及使用BlendMap和3种材质绘制贴图效果的方法. 最后演示如何调整摄像机位置和移动速度,在地面上行走. 一个m*n个顶点的平面由2*(m-1)*(n-1)个三角形组成.

设计师在谷歌

- keso - 译言-电脑/网络/数码科技
来源Why I design at Google. 译者eminent.susan. I’m still early in my career, and while it’s nice to find some success, I’m mostly focused on learning and growing my skills.

谷歌验证:Google Authenticator

- loverty - 移动应用观察
  谷歌验证(Google Authenticator)通过两个验证步骤,在登录时为您的谷歌帐号提供一层额外的安全保护. 使用谷歌验证可以直接在用户的设备上生成动态密码,无需网络连接. 特点:自动生成QR码;支持多帐户;支持通过time-based和counter-based生成.   当用户在Google帐号中启用“两步验证”功能后,就可以使用Google Authenticator来防止陌生人通过盗取的密码访问用户的帐户.

Google Plus和谷歌生态

- linfavourite - It Talks-魏武挥的blog
Google Plus(google+)近日发布,这应该是拉里佩奇出任谷歌CEO后第一次面向社交网络的大动作,用户蜂拥而至,以至于据说谷歌一度还关闭了用户邀请机制,因为来的人实在太多了. 这是一个界面上很有些Facebook影子的服务,不过也有些不同,比如说在给自己的好友归组(也就是google+里所谓的圈子),使用了“拖曳”的方式——你可以把好友拽到某个你定义的圈子里去.