html - 如何在 CSS 图像幻灯片中的图像之间添加空格？

Question

编辑:

进展顺利...通过更新以下代码，我几乎完全得到了我想要实现的目标，但我不明白为什么它几乎可以工作。过渡期间两侧间距，过渡后隐藏间距，但有少量图像剪裁:https://codepen.io/anon/pen/LWqPJB

body { 
     margin: -6%; 
} 
div#slider { 
     overflow: hidden; 
}
div#slider figure img { 
     width: 18%; 
     float: left; 
     padding-left: 1%; 
     padding-right: 1%;
}

虽然这不是一个完美的解决方案，但似乎可以完成这项工作的第二种选择是:

div#slider {
    margin-left: -6%;
    margin-right: -6%;
    overflow: hidden;
}
div#slider figure img {
    width: 18%; 
    margin-left: 1%;
    margin-right: 1%;
    float: left;
}

---

问题

我正在仅使用 HTML 和 CSS 在网页中实现一个简单的图像幻灯片。我开始使用的代码在下方 https://codepen.io/anon/pen/wJRVwP。

目前，每张幻灯片紧接着下一张，图片之间没有空格(图片 1)。但是，我试图在每个图像之间添加一个 100px 的空间，该空间仅在过渡期间可见。因此，我尝试添加一个间隙，更改了下面的 CSS 代码；

来自:

div#slider figure img { width: 20%; float: left;}

(演示 1: https://codepen.io/anon/pen/wJRVwP )

到:

div#slider figure img { width: 20%; float: left; padding-left: 100px;}

(演示 2: https://codepen.io/anon/pen/vxvoNy )

更改代码的结果是在所有图像之间增加了 100px 的空间，但是，代码更改引入了一个新问题——图像不再对齐并且在每次幻灯片更改后逐渐变得更糟(图片 2).

Question

How can I achieve a space between images and fix this? In code, how can I change the CSS code to add a 100px space between each image, and keep all images aligned during and after transition?

---

图片

1. 过渡期间的演示 1。

1. 过渡后的演示 1。

1. 要求的结果。

---

代码

https://codepen.io/anon/pen/wJRVwP

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

body {
  margin: 0;
}

div#slider {
  overflow: hidden;
}

div#slider figure img {
  width: 20%;
  float: left;
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite;
}

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
  <figure>
    <img src="austin-fireworks.jpg" alt>
    <img src="taj-mahal_copy.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
    <img src="ankor-wat.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
  </figure>
</div>

Answer 1

将 box-sizing:border-box 属性应用于所有 img。向左和向右添加填充(如果两边都不填充，看起来有点奇怪)。

这些是css调整

div#slider figure img { 
    width: 20%; 
    float: left; 
    padding-right: 50px;
    padding-left: 50px;
    box-sizing:border-box
}

下面的片段

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

body {
  margin: 0;
}

div#slider {
  overflow: hidden;
}

div#slider figure img {
  width: 20%;
  float: left;
  padding-right: 50px;
  padding-left: 50px;
  box-sizing: border-box
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite;
}

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
  <figure>
    <img src="austin-fireworks.jpg" alt>
    <img src="taj-mahal_copy.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
    <img src="ankor-wat.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
  </figure>
</div>