首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-12-25 
模拟谷歌今日使用的css动画 不知道大家有没有注意到谷歌今天官网上的logo,刚开始一看还以为是gif,在仔细一

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

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

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

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

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

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

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

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

  附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年)。

热点排行