G時代雖然現(xiàn)在消費者用電腦逛淘寶的的機會越來越少，但是對于很多還想入淘的新賣家來說，PC端裝修在他們心中也是至關重要，其實PC端首頁裝修常見的模塊無非就那幾個，店招，導航，輪播海報，優(yōu)惠券，全屏寬圖等，其中淘寶pc端全屏海報尺寸寬度1920px，高度隨意哈！

當然很多KA商家玩的可能會玩得更花，尤其是在618、雙11這樣的大促期間，加上各種的特效，比如下雪，雪花、元寶、花瓣等，看著很炫酷，間接增加店鋪客戶粘度。

今天幫一個做工業(yè)設備的朋友裝修了一下PC端店鋪首頁，對于店招、輪播海報等這些網(wǎng)上教程有很多，沒太多技巧，就那個方法，我就不贅述了，下面來說一下首頁裝修遇到的一個問題就是全屏海報之前空白間隙的問題，該如何去除呢？當然網(wǎng)上也是有很多教程的，也有工具可以去除的，但是按照這種方法操作肯定能夠去除間隙。

很多首頁裝修的時候，全屏海報因為看著高端、大氣、上檔次，因此首頁裝修都是必不可少的，但是會出現(xiàn)海報與海報之前有空白間隙的問題，這個空白間隙一般是20px,當然，有很多美工裝修助手都是可以直接去掉這些空白間隙的，但是幾乎所有的裝修工具都是收費的，那不借助這些收費的工具該如何去除呢？(最后分享一個免費的)

全屏海報的添加都是通過店鋪裝修后臺左側(cè)欄中基礎模塊中的自定義區(qū)模塊添加的，如果大家稍微知道一些div+css的知識，不借助工具直接在DW里面寫的話一般都會避免出現(xiàn)海報與海報之間間隙的問題。當然如果添加完海報在預覽狀態(tài)下出現(xiàn)留白間隙的話，很多時候都是借助工具生產(chǎn)的代碼才會出現(xiàn)這種情況，出現(xiàn)白色間隙先返回裝修頁面點擊右上角 "裝修"，進入自定義內(nèi)容區(qū)，顯示標題處 選擇"不顯示"，然后點擊“源碼”，進入源碼狀態(tài)，按下圖所示的1和2 兩個步驟操作修改源碼，可以完美去除海報之間的留白問題。

當然我截圖的代碼顯示的是我這邊height:710px, -20px 就是690px, 你的height是多少， 根據(jù)情況減20px就可以了。也就是說1和2步驟都是要減掉白色間隙的20px.

其實經(jīng)常搞設計的美工，手里都會有幾個經(jīng)常用到的美工助手工具，而且網(wǎng)上有很多類似 這樣的，免費的功能幾乎都都能滿足日常需要，更會為設計師節(jié)省不少時間。在這里就不再分享了哈，以免被誤認為有打廣告的嫌疑.

個網(wǎng)站收集了很多 CSS 加載動畫，代碼很簡單，效果很好，可以收藏以后查閱用。

關于 CSS Loaders

CSS Loaders 是一個收集了互聯(lián)網(wǎng)上很多加載動畫效果代碼的網(wǎng)站，其中包含了動畫效果的源代碼，方便像我們這樣的前端開發(fā)者來使用。

自從 CSS3 的動畫屬性得到主流瀏覽器的支持以后，我們經(jīng)常看到使用 CSS 實現(xiàn)的各種加載動畫效果，而這個網(wǎng)站就專門收集并且分類整理這些動畫效果，無論是學習或者是查閱，甚至是二次修改來實現(xiàn)定制的需求，都能很好地滿足我。

網(wǎng)站特色

• 收集了超過 500 個 web 動畫加載效果，五花八門，幾乎覆蓋我們所見過的所有動畫；
• 所有的動畫都是通過 CSS3 來實現(xiàn)，沒有一行 JS 代碼；
• 所有的動畫都只需要一個 dom 元素，開發(fā)調(diào)用很簡單，代碼也很簡潔。

CSS 動畫實現(xiàn)的 loading 有什么優(yōu)勢？

以前常規(guī)的動畫加載效果是做一張 gif 格式的動圖，需要加載時顯示圖片，加載完成后隱藏圖片。這種原始的方式有幾個缺點：

1. 動圖占用空間大，而且很難壓縮；
2. 顯示效果不好，特別是在手機這種高清屏幕上，往往都會模糊；
3. 透明像素會有白邊，在非純色背景上顯示很糟糕；
4. 圖片確定后不能修改，如要要改變顏色、播放速度，需要重新制作。

這就是 gif 動圖的弊端，相反，CSS 實現(xiàn)的加載效果，不僅動畫流暢，還可以根據(jù)需要改變顏色和播放速度等，關鍵是占用空間很小。所以越來越多的開發(fā)者和設計師在前期規(guī)劃時，都會優(yōu)先考慮 CSS 動畫來實現(xiàn)。

CSS Loaders 已經(jīng)幫我們把非常多的加載效果都整理好了，是一個非常好用的加載動畫預覽和文檔網(wǎng)站。

開發(fā)上手

CSS Loaders 主頁是一個隨機的動畫效果，顯示了該動畫的 dom 結構代碼，非常簡潔：

<div class="loader"></div>

所有的動畫效果都是這個結構，然后我們鼠標懸停在動畫上，就會顯示「copy the css」按鈕，點擊就會復制這個 loader 的所有樣式，粘貼到我們的項目 css 中，動畫就生效了，使用非常簡單。比如常見的圓圈加載動畫的 CSS 源碼：

.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #514b82;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}

如果需要多個動畫效果，我們可以直接修改 .loader 這個 className，讓不同的動畫效果對應自己的 CSS，這是很基礎的 CSS 語法，這里就不展開說了。

網(wǎng)站的左邊做了不同動畫類型的分類，我們可以點擊切換去查閱。

免費開源說明

CSS Loaders 上所有動畫效果的代碼都是公開可見的，而且得益于 CSS3 強大的動畫支持，實現(xiàn)的代碼都很簡潔，我們直接復制使用就可以了。

↓↓點擊查看本次分享的網(wǎng)站。

CSS Loaders - 純 CSS 實現(xiàn)的各種動畫加載效果，代碼簡潔，全都只需要用一個元素｜那些免費的磚