索引
每次看到很多店鋪，里面琳瑯滿目的漂亮寶貝時(shí)，就很羨慕了，再加上他們還有一些個(gè)性的特效，就尤為羨慕，就拿導(dǎo)航來(lái)說吧，當(dāng)你進(jìn)入那種特效店鋪時(shí)，你就會(huì)發(fā)現(xiàn)，當(dāng)鼠標(biāo)移動(dòng)到每個(gè)區(qū)塊時(shí)，所對(duì)應(yīng)的區(qū)塊會(huì)相應(yīng)的變化，比如變色或者出現(xiàn)其他的圖片什么的。
問題就在這啦，他們是怎么做的呢？呵呵，不用我說，大家也知道，CSS模版唄~沒錯(cuò)，那種模版的確很炫，但是呢，要用錢買，就算申請(qǐng)?jiān)O(shè)計(jì)師，也要好長(zhǎng)時(shí)間，而且不是每個(gè)人都會(huì)匯編語(yǔ)言（嘻嘻，我也不會(huì)）嘿嘿，難道就只能讓你們CSS模版囂張？我們普通店鋪就只能看著？NO！！！今天，我就將我的研究成果展示出來(lái)，讓普通店鋪玩轉(zhuǎn)CSS特效，實(shí)現(xiàn)特效導(dǎo)航！！
應(yīng)用后的效果介紹：
1——當(dāng)鼠標(biāo)移動(dòng)到某個(gè)區(qū)塊時(shí)（我就拿“首頁(yè)”標(biāo)簽來(lái)說），此標(biāo)簽就會(huì)出現(xiàn)一的動(dòng)畫效果，出現(xiàn)透明倒影~如下圖所示，當(dāng)然速度沒這么快啦，呵呵，一秒滾動(dòng)一次
可想而知，沒移動(dòng)到的，就不會(huì)出現(xiàn)倒影，嘿嘿，好玩嗎？
2——如果鼠標(biāo)離開所有區(qū)塊，倒影就開始自動(dòng)播放，使店鋪更加有活力，吸引顧客眼球~嘿嘿
3——制作簡(jiǎn)單，只需制作出圖片，上傳后替換原地址就OK啦~個(gè)性樣式由你定~
由于大家的接受范圍不同，此教程貼分為新手版與專業(yè)版供大家選擇
第一步：下載帖底的附件篇的素材，將里面的素材上傳進(jìn)自己的淘寶圖片空間，每個(gè)小素材就會(huì)有一個(gè)圖片地址啦~
第二步：創(chuàng)建自定義內(nèi)容模塊，方法如下：
⑴ 在裝修界面點(diǎn)擊布局管理
⑵ 點(diǎn)擊完成后自動(dòng)進(jìn)入了布局模塊管理界面，如圖所示
⑶點(diǎn)擊添加模塊
，彈出對(duì)話窗，如圖所示
⑷點(diǎn)擊自定義內(nèi)容區(qū)后面的添加命令，一開始的布局里就會(huì)多出一個(gè)自定義內(nèi)容模塊
⑸將出現(xiàn)的自定義內(nèi)容區(qū)移至最頂層，方法是鼠標(biāo)移到自定義內(nèi)容區(qū)上，按住鼠標(biāo)左鍵不動(dòng)，向上拖動(dòng)即可，最終效果如圖
⑹模塊添加完畢，點(diǎn)擊頁(yè)尾的保存按鈕即可，頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)至裝修界面了
第三部：粘貼代碼進(jìn)入剛剛創(chuàng)建的自定義模塊內(nèi)，方法如下
①現(xiàn)在裝修界面最頂上的一個(gè)模塊就是你剛剛創(chuàng)建的自定義模塊，鼠標(biāo)移上去~它會(huì)變成藍(lán)色哦~之后點(diǎn)擊編輯按鈕
②點(diǎn)擊完后就會(huì)出現(xiàn)自定義內(nèi)容區(qū)編輯界面，效果如下
③點(diǎn)擊
，進(jìn)入到代碼編輯模式，進(jìn)入這個(gè)模式后，除了按鈕，其他按鈕全部會(huì)變淺，效果如下
④復(fù)制附件篇的代碼，之后粘貼進(jìn)編輯區(qū)域，效果如下圖
⑤再次單擊，你就會(huì)直觀的看到整個(gè)效果圖了，效果如下
第四步：替換圖片地址與鏈接地址，方法如下（拿首頁(yè)模塊舉例）
⒈ 用鼠標(biāo)點(diǎn)擊其中首頁(yè)模塊， 周圍會(huì)出現(xiàn)幾個(gè)點(diǎn)點(diǎn)，這表示現(xiàn)在系統(tǒng)認(rèn)定你準(zhǔn)備編輯首頁(yè)這張圖片了，如下圖所示
⒉ 之后點(diǎn)擊
，然后會(huì)彈出一個(gè)對(duì)話框，用來(lái)替換圖片地址和鏈接地址，替換好后就可以點(diǎn)擊確認(rèn)了，看下圖就了解
⒊ 替換完全部區(qū)域塊之后，就可以保存收工啦~嘿嘿
第四步：發(fā)布吧~發(fā)布完你就看到你的店鋪動(dòng)起來(lái)了~哈哈
-----------------素材制作篇---------------
1-----設(shè)計(jì)出最終效果的完整圖
圖一
圖一就是我們要的實(shí)際效果
2-----切塊，把我們要的每個(gè)區(qū)塊給弄成一塊塊的
圖二
將每一個(gè)區(qū)塊切出來(lái)，如圖二所示
PS : 用什么工具？PS都可以不用，電腦自帶的畫圖工具就OK，步驟如下：
⑴圖畫工具打開最終效果圖（即圖一）
⑵擊選定命令（XP系統(tǒng)的符號(hào)是
，WIN7系統(tǒng)是
）框選你要的區(qū)域
⑶選完成后，使用組合鍵CTRL+C，進(jìn)行復(fù)制
⑷再打開一個(gè)新的畫圖工具，使用組合鍵CTRL+V進(jìn)行粘貼，效果圖為圖三
圖三
⑸后點(diǎn)擊保存就行了，首頁(yè)這個(gè)區(qū)塊就完成了~以此類推，完成所有區(qū)塊的制作~
3-----倒影的制作
這里就需要運(yùn)用到PS的變淺工具了，大家可以搜索一下這個(gè)教程 http://hi.baidu.com/love800/blog/item/1c669cef3a89e5e6ce1b3eb4.html 也可以直接到底部素材區(qū)下載素材，如果自己制作，只用注意最后保存PNG就行了
-----------------使用篇-----------------
現(xiàn)在素材都有了，接下來(lái)，好戲就要登場(chǎng)了
特效原理（可以忽略）
因?yàn)镃SS模版都是運(yùn)用的CSS語(yǔ)言，而在普通的自定義模版中，不支持CSS語(yǔ)言，他會(huì)自動(dòng)過濾掉，但是，我們可以直接調(diào)用官方內(nèi)置的一些模塊，加以修改，實(shí)現(xiàn)我們要的效果，關(guān)于怎么編寫這些代碼，我就不多講了，應(yīng)為我也不專業(yè)，是看自己一點(diǎn)點(diǎn)研究才搞會(huì)的，呵呵，要我說出來(lái)，我還真不知道該怎么說~對(duì)于新手來(lái)說，特效原理這一段可以不看，直接從下面的步驟篇開始閱讀~
但為了順義部分愛研究的淘友們，我還是先把代碼給大家看看吧，你們拿到代碼后，只用修改圖片地址和一些自定義效果數(shù)值就好~呵呵，運(yùn)用到的工具僅僅是電腦自帶的記事本工具
圖四
圖四里的內(nèi)容你只用關(guān)心我劃?rùn)M線的兩個(gè)注釋，可以修改，也可以不改~我都設(shè)置在最佳值了~
安裝步驟：
1——進(jìn)入店鋪裝修界面，創(chuàng)建一個(gè)自定義模塊，方法如下：
圖五
① 圖五所示，點(diǎn)擊布局管理，進(jìn)入布局模塊管理界面，界面圖為圖六
圖六
② 點(diǎn)擊添加模塊，彈出模塊對(duì)話窗口，見圖七
圖七
③ 點(diǎn)擊添加，之后將你剛剛添加的自定義內(nèi)容區(qū)移動(dòng)到最頂端，使其變成圖六的布局樣式，弄完后就可以點(diǎn)擊頁(yè)面下面的保存按鈕了，之后就會(huì)自動(dòng)跳轉(zhuǎn)至首頁(yè)裝修界面了
2——導(dǎo)入代碼進(jìn)自定義模塊區(qū)
圖八
① 圖八所展示的是現(xiàn)在首頁(yè)裝修界面布局
② 之后我們將鼠標(biāo)移動(dòng)到那個(gè)自定義頁(yè)面內(nèi)容區(qū)上，他則會(huì)變成藍(lán)色，之后我們點(diǎn)擊編輯，如圖九所示
圖九
③ 點(diǎn)擊完編輯后就會(huì)出現(xiàn)熟悉的界面，如圖十所示
圖十
④ 后我們點(diǎn)擊編輯源代碼，也就是這個(gè)按鈕，點(diǎn)完他后其他圖標(biāo)都會(huì)變淺的哦~然后復(fù)制我的代碼，粘貼進(jìn)內(nèi)容區(qū)，如圖十一所示
圖十一
⑤ 后再次點(diǎn)擊 ，這時(shí)，代碼就變成了我們要的導(dǎo)航了，效果如圖十二所示
圖十二
PS：做完以上步驟現(xiàn)在還不能點(diǎn)擊保存哦，因?yàn)椋a里的圖片地址都是我的圖片地址喲~你必須上傳素材到自己的圖片空間，再替換進(jìn)現(xiàn)在的模版里，怎么替換？很簡(jiǎn)單
先用鼠標(biāo)點(diǎn)擊其中一個(gè)模塊，就拿首頁(yè)來(lái)說吧~點(diǎn)擊一下首頁(yè)，效果如圖十三
圖十三
看見了嗎？周圍會(huì)出現(xiàn)幾個(gè)點(diǎn)點(diǎn)，這表示現(xiàn)在系統(tǒng)認(rèn)定你準(zhǔn)備編輯首頁(yè)，之后點(diǎn)擊，然后會(huì)彈出一個(gè)對(duì)話框，如圖十四所示
圖十四
替換好后就可以點(diǎn)擊保存了~就按這樣的步驟，替換完之后的圖片鏈接和地址鏈接，簡(jiǎn)單吧，就是復(fù)制粘貼就好了~呵呵
⑥ 最后，你就可以安心的點(diǎn)擊保存啦~接下來(lái)點(diǎn)擊預(yù)覽，看看最終效果吧，是不是很有趣呢？呵呵
-----------------附件篇-----------------
1------代碼（下載好的是一個(gè)TXT文檔，雙擊打開就行~然后全選里面的內(nèi)容，CTRL+C復(fù)制就行了~嘻嘻，方便的不得了）
http://u.115.com/file/f2e945dd9f#
2------素材
http://u.115.com/file/f276fd55ce#
嘿嘿，任務(wù)完成，喜歡DIY的同學(xué)，一定要頂我喲，嘿嘿，下次我教大家的是圖片輪播展位頁(yè)數(shù)我來(lái)定，只能用4張？我們用40張！
別囂張，我們普通店鋪一樣玩轉(zhuǎn)CSS特效店鋪~~~
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則
本文來(lái)源： 普通店鋪如何用CSS特效動(dòng)畫制作特效導(dǎo)航制作
