Gangmax Blog

Today's google doodle

今天的Google为了纪念”英国实验摄影师’埃德沃德·迈布里奇’182周年诞辰”使用了如下的动态图片，点击Button就可以实现动画效果：

埃德沃德·迈布里奇

其动画效果其实是由3张图片加上HTML和CSS实现的。代码如下：

1
2
3
4
5
6
7
8
<div id="hplogo" role="button" title="英国实验摄影师 埃德沃德·迈布里奇 182 周年诞辰" style="background: url(&quot;/logos/2012/muybridge12-hp-f.jpg&quot;) repeat scroll -536px 0pt transparent; cursor: pointer; height: 162px; margin-top: 35px; position: relative; width: 469px;">

    <div id="hplogo-p" style="background: url(&quot;/logos/2012/muybridge12-hp-p.jpg&quot;) no-repeat scroll -69.7608px 0pt transparent; height: 54px; left: 201px; position: absolute; top: 54px; width: 67px;">
    </div>
    
    <div id="hplogo-v" style="background: url(&quot;/logos/2012/muybridge12-hp-v.png&quot;) repeat scroll 0% 0% transparent; height: 162px; left: 0pt; position: absolute; top: 0pt; width: 469px;">
    </div>
</div>

三个图片文件如下：

Button

Background

Horse

Comments