G时代虽然现在消费者用电脑逛淘宝的的机会越来越少，但是对于很多还想入淘的新卖家来说，PC端装修在他们心中也是至关重要，其实PC端首页装修常见的模块无非就那几个，店招，导航，轮播海报，优惠券，全屏宽图等，其中淘宝pc端全屏海报尺寸宽度1920px，高度随意哈！

当然很多KA商家玩的可能会玩得更花，尤其是在618、双11这样的大促期间，加上各种的特效，比如下雪，雪花、元宝、花瓣等，看着很炫酷，间接增加店铺客户粘度。

今天帮一个做工业设备的朋友装修了一下PC端店铺首页，对于店招、轮播海报等这些网上教程有很多，没太多技巧，就那个方法，我就不赘述了，下面来说一下首页装修遇到的一个问题就是全屏海报之前空白间隙的问题，该如何去除呢？当然网上也是有很多教程的，也有工具可以去除的，但是按照这种方法操作肯定能够去除间隙。

很多首页装修的时候，全屏海报因为看着高端、大气、上档次，因此首页装修都是必不可少的，但是会出现海报与海报之前有空白间隙的问题，这个空白间隙一般是20px,当然，有很多美工装修助手都是可以直接去掉这些空白间隙的，但是几乎所有的装修工具都是收费的，那不借助这些收费的工具该如何去除呢？(最后分享一个免费的)

全屏海报的添加都是通过店铺装修后台左侧栏中基础模块中的自定义区模块添加的，如果大家稍微知道一些div+css的知识，不借助工具直接在DW里面写的话一般都会避免出现海报与海报之间间隙的问题。当然如果添加完海报在预览状态下出现留白间隙的话，很多时候都是借助工具生产的代码才会出现这种情况，出现白色间隙先返回装修页面点击右上角 "装修"，进入自定义内容区，显示标题处 选择"不显示"，然后点击“源码”，进入源码状态，按下图所示的1和2 两个步骤操作修改源码，可以完美去除海报之间的留白问题。

当然我截图的代码显示的是我这边height:710px, -20px 就是690px, 你的height是多少， 根据情况减20px就可以了。也就是说1和2步骤都是要减掉白色间隙的20px.

其实经常搞设计的美工，手里都会有几个经常用到的美工助手工具，而且网上有很多类似 这样的，免费的功能几乎都都能满足日常需要，更会为设计师节省不少时间。在这里就不再分享了哈，以免被误认为有打广告的嫌疑.

个网站收集了很多 CSS 加载动画，代码很简单，效果很好，可以收藏以后查阅用。

关于 CSS Loaders

CSS Loaders 是一个收集了互联网上很多加载动画效果代码的网站，其中包含了动画效果的源代码，方便像我们这样的前端开发者来使用。

自从 CSS3 的动画属性得到主流浏览器的支持以后，我们经常看到使用 CSS 实现的各种加载动画效果，而这个网站就专门收集并且分类整理这些动画效果，无论是学习或者是查阅，甚至是二次修改来实现定制的需求，都能很好地满足我。

网站特色

• 收集了超过 500 个 web 动画加载效果，五花八门，几乎覆盖我们所见过的所有动画；
• 所有的动画都是通过 CSS3 来实现，没有一行 JS 代码；
• 所有的动画都只需要一个 dom 元素，开发调用很简单，代码也很简洁。

CSS 动画实现的 loading 有什么优势？

以前常规的动画加载效果是做一张 gif 格式的动图，需要加载时显示图片，加载完成后隐藏图片。这种原始的方式有几个缺点：

1. 动图占用空间大，而且很难压缩；
2. 显示效果不好，特别是在手机这种高清屏幕上，往往都会模糊；
3. 透明像素会有白边，在非纯色背景上显示很糟糕；
4. 图片确定后不能修改，如要要改变颜色、播放速度，需要重新制作。

这就是 gif 动图的弊端，相反，CSS 实现的加载效果，不仅动画流畅，还可以根据需要改变颜色和播放速度等，关键是占用空间很小。所以越来越多的开发者和设计师在前期规划时，都会优先考虑 CSS 动画来实现。

CSS Loaders 已经帮我们把非常多的加载效果都整理好了，是一个非常好用的加载动画预览和文档网站。

开发上手

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 语法，这里就不展开说了。

网站的左边做了不同动画类型的分类，我们可以点击切换去查阅。

免费开源说明

CSS Loaders 上所有动画效果的代码都是公开可见的，而且得益于 CSS3 强大的动画支持，实现的代码都很简洁，我们直接复制使用就可以了。

↓↓点击查看本次分享的网站。

CSS Loaders - 纯 CSS 实现的各种动画加载效果，代码简洁，全都只需要用一个元素｜那些免费的砖