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并更改一些参数。

DataGridViewCellStyle highlightCellStyle = new DataGridViewCellStyle();
highlightCellStyle.BackColor = Color.Green;
dataGridView1.CurrentRow.DefaultCellStyle = highlightCellStyle;

@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;
}

CSS图像幻灯片图像彼此相邻

1 个答案: