使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,从而实现了动画效果。
首先,需要两张图,分别是:
当有这两张图后,我们就可以开始模拟了。
我先通过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
=
"le