css - 循环遍历 CSS 中的 HTML 元素并应用样式

Question

我有 4 张卡片（可扩展为 N 张卡片），我想使用 HTML 和 CSS 以堆叠效果显示。

期望的输出：

到目前为止，我有以下代码，但需要一些帮助来调整 CSS 以显示所有 4 张卡片而不是 2 张卡片的堆叠效果。

body {
  background-color: #e8eaed;
}
.stack {
  width: 500px;
  height: 500px;
  position: absolute;
}

.card {
  width: 80%;
  min-height: 40%;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 10rem;
  color: #00000080;
  box-shadow: 0 5px 15px 0 #00000040, 0 5px 5px 0#00000020;
  transition: transform 200ms;
}

.card:nth-last-child(1) {
  --y: calc(-50% + 15px);
  transform: translate(-50%, var(--y)) scale(1.05);
}

<div class="stack">
      <div class="card" style="--i:1">1</div>
      <div class="card" style="--i:2">2</div>
      <div class="card" style="--i:3">3</div>
      <div class="card" style="--i:4">4</div>
</div>

标签： css

Answer 1

您在样式中使用 CSS 自--y定义属性--i，在标记中使用自定义属性。

我对您的样式进行了一些编辑，以演示如何实现您描述的效果。

工作示例：

body {
  background-color: #e8eaed;
}
.stack {
  width: 500px;
  height: 500px;
  position: absolute;
}

.card {
  width: 80%;
  min-height: 40%;
  background-color: white;
  position: absolute;
  top: 100px;
  left: 100px;
  transform: translate(-50%, -50%);
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 10rem;
  color: #00000080;
  box-shadow: 0 5px 15px 0 #00000040, 0 5px 5px 0#00000020;
  transition: transform 200ms;
}

.card {
  transform: translateY(calc((var(--y) * 20px) - 50%)) scale(calc(1.0 + var(--y) * 0.05));
}

<div class="stack">
      <div class="card" style="--y:1">1</div>
      <div class="card" style="--y:2">2</div>
      <div class="card" style="--y:3">3</div>
      <div class="card" style="--y:4">4</div>
</div>