Simulate the CSS animation that Google uses today

I don't know if you have noticed the logo on Google's official website today. At first, I thought it was a GIF. After a closer look, I found that this was not the case. I used the CSS sprite technology, the animation effect is achieved by using an initial image and a spliced image filled with various actions.

I tried to crack it for a while, but I found that Google's Js was so awesome that I could only simulate it with my own thinking. First, we need two graphs:

When we have these two images, we can start to simulate them.

I first observed through firebug, and found that the Google homepage will cyclically load the following htmlCode:

<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> ......

In fact, this is the factor for implementing the animation effect, but I found that I can generate it cyclically, but I cannot generate the style in each Div cyclically, because the style width and height and offset pixels are irregular, my approach is to copy the code generated by Google, hide it by default, and then display it cyclically.

The principle is that JS implementation is simpler, so I will not use jquery. below is the JS implementation code:

 
VaR I = 0; window. setinterval (Google, 83); function Google () {if (I <= 154) {var logo = document. getelementbyid ("hplogo" + I); logo. style. display = 'block';} I ++ ;}
 

Let's take a look at the demo.

By the way, I also need to attach the source code. There is not much technical content. If there is any problem, I hope to give me some advice. Source code download

Appendix 1: Later I found that Google originally stored coordinates and other information in the JS array, and then wrote the values together when adding the DIV element cyclically, read "Today's Google logo Masha gramme"

Appendix 2: Additional knowledge

today, Google graffiti is designed to commemorate the birth of Martha Graham, the pioneer of modern dance, 117-. He is an American dancer And choreographer, it is also one of the founders of modern dance history. His works are based on American Humanities or classical Greek mythology. His masterpiece includes primitive mysteries (1936) and Letter to the World (1940), Appalachian Spring, 1944, and night travel (Night Journey, 1947 ).