一年一度的電商盛會，雙十一正在如火如荼的進行中，還有五天就正式開始了。

米色作為一名在電商里面摸爬滾打這么多的老司機，忍不住也到處去逛逛，看看有啥好東西。由于米色是超級吃貨一枚，所以不出意外的逛到了賣零食的店鋪。

可能是職業(yè)病的緣故，我進店鋪首先是看店鋪設計和特效表現(xiàn)，當進去三只松鼠店鋪的時候，被其中一個特效吸引了。

有同志要問了，不就是一個簡單的CSS特效嘛，至于被吸引嗎？

當然了，吸引我的不是特效本身，大家都知道不管淘寶店還是天貓店，默認時候店鋪里面是沒有CSS權限的，也就是你制作不了特效。雖說這個特效在本地很快就能寫好，但是米色君，想嘗試一下，當?shù)赇仜]有購買CSS權限的情況下，能不能在店鋪里面也實現(xiàn)這個特效呢？

米色本身就是一個執(zhí)行力比較強的人，說干咱就干，然后就擼起袖子一陣干.....（此處省虐1111個字）

隨著一陣忙活，終于算是大功告成了。跟三只老鼠店鋪一對比 基本上是一模一樣了?？聪聢D完成后效果

這時候有同志要問，要么完成，要么沒完成，咋還算是完成呢？理由如下：

1-店鋪沒有購買CSS權限，所以難免效果有點小瑕疵，還好問題不大

2-因為米色窮，沒有天貓店測試，所以暫時沒有編寫天貓店可用的代碼，下面你將看到的代碼是僅限淘寶店鋪使用的。

這也是一大遺憾，如果能做成全店通用就完美了，可惜了，沒有天貓店測試......

說了半天，有同志忍不住了，老濕，咱能別打這么多字嗎，頭暈，說半天，還是木有看到什么代碼。

這位仁兄，不要慌，凡事還不得有個前奏不是，一上來就直奔主題，未免顯得猴子，有失風度不是。

好了不多說了，不然該被揍了。下面來聊聊代碼部分的東西：

【特效分析】：

這個效果很簡單，會代碼的人 基本上分分鐘搞定，但是再淘寶店就不是那么好使了。好像又偏題了....

咋一看這特效，老夫掐指一算，肯定是鼠標經(jīng)過分類圖的時候，圖片右邊移動一點（0 - 0 老濕，明眼人一看就知道）

那么能實現(xiàn)這樣效果的CSS樣式有哪些呢？（定位，萎類....）

【代碼說明】：

作者：米色（miser1314）

權限：無需購買CSS權限，無需購買店鋪模板

1-你要做的只是，按照這個效果的圖片樣子去設計你需要的效果，然后替換圖片地址，鏈接地址。圖片原件也分享出來了

2-由于代碼量較多，所以不懂代碼的話，最好只是修改圖片，不要修改改嗎效果。有代碼基礎的話，可以做效果變形

3-由于米色沒有天貓店，所以暫時沒有做天貓版的，以后有天貓店鋪了，再分享把

4-注意，代碼中已經(jīng)添加了全屏代碼，所以如果你是淘寶專業(yè)版，智能版，可直接復制代碼放自定義模塊-源碼模式下使用。如果你是基礎班的，就復制下面對應的基礎班代碼。

【源碼分享】：

文件已經(jīng)上傳到文章附件，直接下載即可。

有不明白的，可以留言回復。