html - 彼此相邻的 CSS 图像幻灯片图像

Question

我是一名学习基础 HTML 和 CSS 的学生。我用我在数字艺术课上创作的作品集制作了一个网站，并制作了一个简单的 CSS 幻灯片。目标是让每个图像都在自己的幻灯片上，并让它自动滚动。现在，我调整了大小，以便在选项卡最大化时适合它们，并且它们在一张幻灯片上彼此相邻。这是 HTML:

@keyframes slider {
  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%;
  }
}

#slider {
  overflow: hidden;
}

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

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

img {
  display: block;
  max-width: 5%;
  width: auto;
  height: auto;
}

<div id="slider">
  <figure>
    <img src="riley%20clipping%20mask%20again.jpg" style="width:10%;">
    <img src="pouya%20t%20shirt%20design.jpg" style="width:10%;">
    <img src="Bob%20ross%20is%20our%20lord%20-riley.jpg" style="width:10%;">
    <img src="Pos%20and%20neg%20riley.jpg" style="width:10%;">
    <img src="ben%20is%20trippy.jpg" style="width:10%;">
  </figure>

</div>

Answer 1

很简单。干得好。必须将您的图形更改为 div 并更改一些参数。

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

#slider {
  overflow: hidden;
  margin: 0 auto;
}

#container img {
  width: 20%;
  float: left;
}

#container {
  position: fixed;
  width: 500%;
  margin: 0;
  top: 50%;
  left: 50%;
  text-align: left;
  font-size: 0;
  animation: 20s slider infinite;
}

img {
  display: block;
  float: left;
  width: auto;
  height: auto;
}

<div id="slider">
  <div id="container">
    <img src="riley%20clipping%20mask%20again.jpg">
    <img src="pouya%20t%20shirt%20design.jpg">
    <img src="Bob%20ross%20is%20our%20lord%20-riley.jpg">
    <img src="Pos%20and%20neg%20riley.jpg">
    <img src="ben%20is%20trippy.jpg">
  </div>
</div>