索引
每次看到很多店铺，里面琳琅满目的漂亮宝贝时，就很羡慕了，再加上他们还有一些个性的特效，就尤为羡慕，就拿导航来说吧，当你进入那种特效店铺时，你就会发现，当鼠标移动到每个区块时，所对应的区块会相应的变化，比如变色或者出现其他的图片什么的。
问题就在这啦，他们是怎么做的呢？呵呵，不用我说，大家也知道，CSS模版呗~没错，那种模版的确很炫，但是呢，要用钱买，就算申请设计师，也要好长时间，而且不是每个人都会汇编语言（嘻嘻，我也不会）嘿嘿，难道就只能让你们CSS模版嚣张？我们普通店铺就只能看着？NO！！！今天，我就将我的研究成果展示出来，让普通店铺玩转CSS特效，实现特效导航！！
应用后的效果介绍：
1——当鼠标移动到某个区块时（我就拿“首页”标签来说），此标签就会出现一的动画效果，出现透明倒影~如下图所示，当然速度没这么快啦，呵呵，一秒滚动一次
可想而知，没移动到的，就不会出现倒影，嘿嘿，好玩吗？
2——如果鼠标离开所有区块，倒影就开始自动播放，使店铺更加有活力，吸引顾客眼球~嘿嘿
3——制作简单，只需制作出图片，上传后替换原地址就OK啦~个性样式由你定~
由于大家的接受范围不同，此教程贴分为新手版与专业版供大家选择
第一步：下载帖底的附件篇的素材，将里面的素材上传进自己的淘宝图片空间，每个小素材就会有一个图片地址啦~
第二步：创建自定义内容模块，方法如下：
⑴ 在装修界面点击布局管理
⑵ 点击完成后自动进入了布局模块管理界面，如图所示
⑶点击添加模块
，弹出对话窗，如图所示
⑷点击自定义内容区后面的添加命令，一开始的布局里就会多出一个自定义内容模块
⑸将出现的自定义内容区移至最顶层，方法是鼠标移到自定义内容区上，按住鼠标左键不动，向上拖动即可，最终效果如图
⑹模块添加完毕，点击页尾的保存按钮即可，页面会自动跳转至装修界面了
第三部：粘贴代码进入刚刚创建的自定义模块内，方法如下
①现在装修界面最顶上的一个模块就是你刚刚创建的自定义模块，鼠标移上去~它会变成蓝色哦~之后点击编辑按钮
②点击完后就会出现自定义内容区编辑界面，效果如下
③点击
，进入到代码编辑模式，进入这个模式后，除了按钮，其他按钮全部会变浅，效果如下
④复制附件篇的代码，之后粘贴进编辑区域，效果如下图
⑤再次单击，你就会直观的看到整个效果图了，效果如下
第四步：替换图片地址与链接地址，方法如下（拿首页模块举例）
⒈ 用鼠标点击其中首页模块， 周围会出现几个点点，这表示现在系统认定你准备编辑首页这张图片了，如下图所示
⒉ 之后点击
，然后会弹出一个对话框，用来替换图片地址和链接地址，替换好后就可以点击确认了，看下图就了解
⒊ 替换完全部区域块之后，就可以保存收工啦~嘿嘿
第四步：发布吧~发布完你就看到你的店铺动起来了~哈哈
-----------------素材制作篇---------------
1-----设计出最终效果的完整图
图一
图一就是我们要的实际效果
2-----切块，把我们要的每个区块给弄成一块块的
图二
将每一个区块切出来，如图二所示
PS : 用什么工具？PS都可以不用，电脑自带的画图工具就OK，步骤如下：
⑴图画工具打开最终效果图（即图一）
⑵击选定命令（XP系统的符号是
，WIN7系统是
）框选你要的区域
⑶选完成后，使用组合键CTRL+C，进行复制
⑷再打开一个新的画图工具，使用组合键CTRL+V进行粘贴，效果图为图三
图三
⑸后点击保存就行了，首页这个区块就完成了~以此类推，完成所有区块的制作~
3-----倒影的制作
这里就需要运用到PS的变浅工具了，大家可以搜索一下这个教程 http://hi.baidu.com/love800/blog/item/1c669cef3a89e5e6ce1b3eb4.html 也可以直接到底部素材区下载素材，如果自己制作，只用注意最后保存PNG就行了
-----------------使用篇-----------------
现在素材都有了，接下来，好戏就要登场了
特效原理（可以忽略）
因为CSS模版都是运用的CSS语言，而在普通的自定义模版中，不支持CSS语言，他会自动过滤掉，但是，我们可以直接调用官方内置的一些模块，加以修改，实现我们要的效果，关于怎么编写这些代码，我就不多讲了，应为我也不专业，是看自己一点点研究才搞会的，呵呵，要我说出来，我还真不知道该怎么说~对于新手来说，特效原理这一段可以不看，直接从下面的步骤篇开始阅读~
但为了顺义部分爱研究的淘友们，我还是先把代码给大家看看吧，你们拿到代码后，只用修改图片地址和一些自定义效果数值就好~呵呵，运用到的工具仅仅是电脑自带的记事本工具
图四
图四里的内容你只用关心我划横线的两个注释，可以修改，也可以不改~我都设置在最佳值了~
安装步骤：
1——进入店铺装修界面，创建一个自定义模块，方法如下：
图五
① 图五所示，点击布局管理，进入布局模块管理界面，界面图为图六
图六
② 点击添加模块，弹出模块对话窗口，见图七
图七
③ 点击添加，之后将你刚刚添加的自定义内容区移动到最顶端，使其变成图六的布局样式，弄完后就可以点击页面下面的保存按钮了，之后就会自动跳转至首页装修界面了
2——导入代码进自定义模块区
图八
① 图八所展示的是现在首页装修界面布局
② 之后我们将鼠标移动到那个自定义页面内容区上，他则会变成蓝色，之后我们点击编辑，如图九所示
图九
③ 点击完编辑后就会出现熟悉的界面，如图十所示
图十
④ 后我们点击编辑源代码，也就是这个按钮，点完他后其他图标都会变浅的哦~然后复制我的代码，粘贴进内容区，如图十一所示
图十一
⑤ 后再次点击 ，这时，代码就变成了我们要的导航了，效果如图十二所示
图十二
PS：做完以上步骤现在还不能点击保存哦，因为，代码里的图片地址都是我的图片地址哟~你必须上传素材到自己的图片空间，再替换进现在的模版里，怎么替换？很简单
先用鼠标点击其中一个模块，就拿首页来说吧~点击一下首页，效果如图十三
图十三
看见了吗？周围会出现几个点点，这表示现在系统认定你准备编辑首页，之后点击，然后会弹出一个对话框，如图十四所示
图十四
替换好后就可以点击保存了~就按这样的步骤，替换完之后的图片链接和地址链接，简单吧，就是复制粘贴就好了~呵呵
⑥ 最后，你就可以安心的点击保存啦~接下来点击预览，看看最终效果吧，是不是很有趣呢？呵呵
-----------------附件篇-----------------
1------代码（下载好的是一个TXT文档，双击打开就行~然后全选里面的内容，CTRL+C复制就行了~嘻嘻，方便的不得了）
http://u.115.com/file/f2e945dd9f#
2------素材
http://u.115.com/file/f276fd55ce#
嘿嘿，任务完成，喜欢DIY的同学，一定要顶我哟，嘿嘿，下次我教大家的是图片轮播展位页数我来定，只能用4张？我们用40张！
别嚣张，我们普通店铺一样玩转CSS特效店铺~~~
乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。
本文来源： 普通店铺如何用CSS特效动画制作特效导航制作
