JavaScript实现Google首页图标动画效果
google 首页的小图标动画，用一张图加上JS和CSS控制，挺机灵的做法。不是用的那种直接播放的 gif，而是通过鼠标事件切换背景位置，视觉上像是动了，其实只是一张图在“跳”。
图的素材是精心切好的 sprite 图，用background-position来控制显示的部分。鼠标滑上去就换个位置，看起来就像小图标动了。嗯，用得好的话，动画流畅，响应也快，还能减少求数，挺适合用在导航栏、按钮图标上。
用起来其实不难，关键点就两个：一是背景图要切得准，二是 JS 要绑定好事件。比如你监听mouseover和mouseout，通过修改元素的样式来实现切换。像这样：
icon.onmouseover = function() {
this.style.backgroundPosition = "0 -32px";
};
icon.onmouseout = function() {
this.style.backgroundPosition = "0 0";
};如果你对鼠标事件不太熟，可以参考这篇js 鼠标事件大全（事件），讲得还蛮清楚的。另外，想找素材图？这篇900 个精美小图标就挺实用，省得你自己一张张切。
，这种做法虽然简单，但视觉效果还不错。如果你在做首页交互，或者想给按钮加点“灵动感”，可以试试这种方法。
文件大小：11KB
评论区