Open Zakariyya opened 4 years ago
date: 2016.10.31 19:56 tags: categories: 日记本
昨天google主页的动画主题是“万圣节”。
没想到的是今天这涂鸦还在主页上。昨晚通关了（共5关）。 通关之后还截图分享给小伙伴看，哈哈。小伙伴还说昨晚在抱怨没把手绘板带过来。
很好奇这些动态的涂鸦，google是怎么做的，flash和gif肯定不是google的作风。
后来找到了相关的，但并不是这种（游戏互动）的。
不过google当然不会这么简单的。我弄了弄，把其中的代码给挖了出来。用了几句css，和两张png图片，还有一大段js script。就完成了今天的google logo的作品
不知道大家有没有注意到谷歌今天官网上的logo，刚开始一看还以为是gif，在仔细一看，发现并非如此，原来是使用CSS，Sprite技术，利用一个初始图片和一张画满各个动作的拼接图片，从而实现了动画效果。
我的方法则是和google 一样，不断的插入带有背景的div 来实现的，先是建立一个这些div 样式信息[left, top, width, height, background-position-x, background-position-y] 的数组，然后用setTimeout 定时地插入带有这些样式的div 即可。）
每天打开google看主页动画 慢慢变成一种习惯。 喜欢这种文化， 喜欢与小伙伴分享每天的google涂鸦。 喜欢一起讨论当中的趣味， google文化影响着我的生活 ……
昨天google主页的动画主题是“万圣节”。
没想到的是今天这涂鸦还在主页上。昨晚通关了（共5关）。 通关之后还截图分享给小伙伴看，哈哈。小伙伴还说昨晚在抱怨没把手绘板带过来。
很好奇这些动态的涂鸦，google是怎么做的，flash和gif肯定不是google的作风。
后来找到了相关的，但并不是这种（游戏互动）的。
喜欢今天的Google LOGO 玛莎·葛兰姆
不过google当然不会这么简单的。我弄了弄，把其中的代码给挖了出来。用了几句css，和两张png图片，还有一大段js script。就完成了今天的google logo的作品
模拟谷歌今日使用的css动画
不知道大家有没有注意到谷歌今天官网上的logo，刚开始一看还以为是gif，在仔细一看，发现并非如此，原来是使用CSS，Sprite技术，利用一个初始图片和一张画满各个动作的拼接图片，从而实现了动画效果。
今天google 首页的javascript 动画实现。好吧，我来晚了。。。
我的方法则是和google 一样，不断的插入带有背景的div 来实现的，先是建立一个这些div 样式信息[left, top, width, height, background-position-x, background-position-y] 的数组，然后用setTimeout 定时地插入带有这些样式的div 即可。）
每天打开google看主页动画 慢慢变成一种习惯。 喜欢这种文化， 喜欢与小伙伴分享每天的google涂鸦。 喜欢一起讨论当中的趣味， google文化影响着我的生活 ……