年中盛典&&国美418

效果原址：http://www.efeihu.com

1.  点击上面网址，可以观看更加细腻的效果，这里我们研究文字上的过光动画。

2.  在没解释之前，大家可以猜一下网页上这效果是怎么做出来的，是flash吗？ 是视频video吗？是gif动画吗？

3.  gif动画是有压缩的，没有网页上看的那么细腻，右击居然可以显示“图片另存为”，自然不是flash和MP4视频。相信很多做过影视后期的朋友, 倾向于认为是用AE渲染出来的视频，因为里面的光效太像灯光工厂插件做的啦！然而并不是。

4。 其实只是给一个盒子的背景用了四张静态图片作为过度，每隔3秒执行一次循环，代码如下所示。

5. 以下四张图片分别对应着上述代码里的（text.jpg、texte.jpg、text3.jpg、text2.jpg),点击可以查看原图。

  

《二》国美418

效果原址：http://prom.gome.com.cn

1、考虑到国美的头部局域受限于中间990px的宽度，他们对990以外的部分也有做处理，但是为了让大家用最少的时间学到最本质的效果，我重新处理了图片，以减少不必要的干扰，同时也得以精简了Html结构，如下所示。

2、同样的原理，国美的这个专题也是把“main”这个盒子的背景变成为4张图片的切换

  

3、它的样式部分是不是跟上面的如出一辙啊？

总的来说，这俩效果都不难，

但是却能营造活泼热闹的氛围，有大活动的感觉。

头部区域做的越细致，越容易引人入胜，

交互感强的页面才容易引起顾客的注意和逗留，

如果只是给设计稿简单的划几刀，

哪怕设计的场景再丰富，

也依然呆板……！