模拟谷歌今天使用的css动画
日期：2014-05-17 浏览次数：20602 次
模拟谷歌今日使用的css动画
不知道大家有没有注意到谷歌今天官网上的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
>
|
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
