日常——google涂鸦
昨天google主页的动画主题是“万圣节”。
没想到的是今天这涂鸦还在主页上。昨晚通关了(共5关)。
通关之后还截图分享给小伙伴看,哈哈。小伙伴还说昨晚在抱怨没把手绘板带过来。
很好奇这些动态的涂鸦,google是怎么做的,flash和gif肯定不是google的作风。
后来找到了相关的,但并不是这种(游戏互动)的。
不过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文化影响着我的生活
……