跳动的火焰舞蹈视频:模拟谷歌今日使用的css动画

来源：百度文库 编辑：九乡新闻网 时间：2024/04/26 12:49:08

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


当有这两张图后，我们就可以开始模拟了。
我先通过firebug观察，发现google首页在运行的时候会循环加载以下html代码：
view sourceprint?













...
...
实际上这就是实现动画效果的因素，但我发现，我可以循环生成，但是我无法循环生成每个div里的样式，因为样式的宽高、偏移像素都是无规律的，所以我的做法就是，把谷歌生成好的代码复制过来，然后默认全部隐藏，然后循环让其显示出来。
原理就是这样，js的实现也更为简单，所以我就没用jquery，以下是js实现代码：
view sourceprint?
var i=0;
window.setInterval(google,83);
function google(){
if(i<=154){
var logo = document.getElementById("hplogo"+i);
logo.style.display = 'block';
}
i++;
}
大功告成，看下demo吧。

顺便把源码也附上吧，没太多技术含量，如果有问题，希望赐教。源码下载
附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年）。 var i=0; window.setInterval(google,83); function google(){ if(i<=154){ var logo = document.getElementById("hplogo"+i); logo.style.display = 'block'; } i++; }
模拟谷歌今日使用的css动画 使用CSS sprite 的好处和坏处分析 动画音画使用的素材 {神奇的}神七问天3D模拟flash动画 CSS使用技巧201则 学会使用css中的behavior 使用GPIO模拟IIC的遇到的N个问题 叩富吧 - 模拟炒股 - KDJ指标的使用奥秘 "神七"模拟flash3D动画 天宫一号发射模拟动画 使用CSS固定html:text 和html:password的宽度 - 技术博客 - 博客大巴 CSS新手整理的CSS技巧/ 使用CSS实现侧边Tab菜单栏1 使用CSS实现侧边Tab菜单栏2 使用CSS实现滑动菜单栏1 CSS柱状图的实现 css选择器的优先级 CSS css 在win32的xampp下使用gmail的smtp模拟sendmail发邮件 一款使用非常简单、多种特效的动画制作软件 CSS的倡导者：学习CSS的10大理由 jQuery选择器CSS的用法 优化你的CSS代码~