普通店铺如何用CSS特效动画制作特效导航制作

索引

每次看到很多店铺，里面琳琅满目的漂亮宝贝时，就很羡慕了，再加上他们还有一些个性的特效，就尤为羡慕，就拿导航来说吧，当你进入那种特效店铺时，你就会发现，当鼠标移动到每个区块时，所对应的区块会相应的变化，比如变色或者出现其他的图片什么的。

问题就在这啦，他们是怎么做的呢？呵呵，不用我说，大家也知道，CSS模版呗~没错，那种模版的确很炫，但是呢，要用钱买，就算申请设计师，也要好长时间，而且不是每个人都会汇编语言（嘻嘻，我也不会）嘿嘿，难道就只能让你们CSS模版嚣张？我们普通店铺就只能看着？NO！！！今天，我就将我的研究成果展示出来，让普通店铺玩转CSS特效，实现特效导航！！

应用后的效果介绍：

1——当鼠标移动到某个区块时（我就拿“首页”标签来说），此标签就会出现一的动画效果，出现透明倒影~如下图所示，当然速度没这么快啦，呵呵，一秒滚动一次

可想而知，没移动到的，就不会出现倒影，嘿嘿，好玩吗？

2——如果鼠标离开所有区块，倒影就开始自动播放，使店铺更加有活力，吸引顾客眼球~嘿嘿

3——制作简单，只需制作出图片，上传后替换原地址就OK啦~个性样式由你定~

由于大家的接受范围不同，此教程贴分为新手版与专业版供大家选择

第一步：下载帖底的附件篇的素材，将里面的素材上传进自己的淘宝图片空间，每个小素材就会有一个图片地址啦~

第二步：创建自定义内容模块，方法如下：

⑴ 在装修界面点击布局管理

⑵ 点击完成后自动进入了布局模块管理界面，如图所示

⑶点击添加模块 ，弹出对话窗，如图所示

⑷点击自定义内容区后面的添加命令，一开始的布局里就会多出一个自定义内容模块

⑸将出现的自定义内容区移至最顶层，方法是鼠标移到自定义内容区上，按住鼠标左键不动，向上拖动即可，最终效果如图

⑹模块添加完毕，点击页尾的保存按钮即可，页面会自动跳转至装修界面了

第三部：粘贴代码进入刚刚创建的自定义模块内，方法如下

①现在装修界面最顶上的一个模块就是你刚刚创建的自定义模块，鼠标移上去~它会变成蓝色哦~之后点击编辑按钮

②点击完后就会出现自定义内容区编辑界面，效果如下

③点击 ，进入到代码编辑模式，进入这个模式后，除了按钮，其他按钮全部会变浅，效果如下

④复制附件篇的代码，之后粘贴进编辑区域，效果如下图

⑤再次单击，你就会直观的看到整个效果图了，效果如下

第四步：替换图片地址与链接地址，方法如下（拿首页模块举例）