CSS 动画：如何在图像向上滑动时显示图像？

Question

我正在开发一款“僵尸打地鼠”游戏，使用 HTML、CSS 和原版 JavaScript。

我有僵尸的动画从它的坟墓工作中上下弹出，但我很难弄清楚如何在他在泥土下时“隐藏”他，并在我制作动画时逐渐显露他他上蹿下跳。

运行下面的代码片段可以明白我的意思。（您可能需要向下滚动结果才能看到正在发生的事情的全貌）

.background {
  width: 220px;
  z-index: 5;
}

.frontdirt {
  width: 220px;
  position: absolute;
  left: 10px;
  z-index: 15;
}

.zombie {
  animation: popup 2s ease-in-out 10 forwards;
  position: absolute;
  width: 220px;
  top:140px; 
  left:2px; 
  z-index: 10;
}

@keyframes popup {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-140px);
  }
  100% {
    transform: translateY(0px);
  }
}

<table>
  <tr>
    <td>
          <img src="https://www.codeeverydamnday.com/images/beforezombie2.png" class="background" />
          <img
            src="https://www.codeeverydamnday.com/images/zombie.png"
            class="zombie"
          />
          <img
            src="https://www.codeeverydamnday.com/images/groundfront2.png"
            class="frontdirt" />
        </td>
  </tr>
  <tr>
    <td>
          <img
            src="https://www.codeeverydamnday.com/images/beforezombie2.png" class="background"
          />
        </td>
  </tr>
</table>

我先是尝试弄乱 z-index，但没有成功，然后是 CSS 定位，但我看不到任何其他方法可以在不使用绝对定位的情况下将其显示在我需要的位置。

我目前正在尝试弄清楚是否有办法将图像保持在其起始位置，但用一些方法隐藏落在其容器（table 单元格）之外的部分有点 overflow: hidden 属性。但是，由于它是绝对定位的，我已将其从文档流中删除，因此它不会遵守任何容器边界。

有什么想法可以改变它的位置吗？有没有办法在不使用绝对的情况下将僵尸定位在“背景”和“frontdirt”图像之间，以便它尊重容器边界？或者我应该完全采用不同的方法吗？

Answer 1

我建议您使用 CSS 网格规范。在这个例子中，我做了一个外部网格来容纳不同的“单元格”（我假设你想要一个经典的 Whackamole 设置）然后每个单元格另一个网格。使用 CSS Grid，您可以在不使用绝对定位的情况下将项目层叠在一起。然后我只是给了图像相对位置并保留了你拥有的 z 索引。这样 overflow: hidden 适用于每个单元格。

这样做的额外好处是可以使用 fr 单位和网格的 minmax 函数进行一些响应，只需将图像设置为 100% 宽度，它们就会一起缩放。

旁注我将翻译功能更改为基于百分比，因此它可以在多种尺寸下工作，但如果您想更直接地控制布局，您也可以为每个网格单元格指定固定宽度。

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr))
}

.cell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
}

.background {
  width: 100%;
  z-index: 5;
  grid-area: 1 / 2 / 1 / 2
}

.frontdirt {
  width: 100%;
  position: relative;
  z-index: 15;
  grid-area: 1 / 2 / 1 / 2
}

.zombie {
  animation: popup 2s ease-in-out infinite forwards;
  position: relative;
  top: 50%;
  width: 100%;
  z-index: 10;
  grid-area: 1 / 2 / 1 / 2
}

@keyframes popup {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

<div class="grid">
  <div class="cell">
    <img src="https://www.codeeverydamnday.com/images/beforezombie2.png" class="background" />
    <img src="https://www.codeeverydamnday.com/images/zombie.png" class="zombie" />
    <img src="https://www.codeeverydamnday.com/images/groundfront2.png" class="frontdirt" />
  </div>
  <div class="cell">
    <img src="https://www.codeeverydamnday.com/images/beforezombie2.png" class="background" />
  </div>
</div>

CSS 动画：如何在图像向上滑动时显示图像？

CSS Animations: How can I reveal an image as it slides up?

css

animation

z-index

absolute

css-animations