Question

我目前正在开发游戏，需要一些html和css的帮助。我有一个名为“犯罪”的页面，您可以处理6种可能的犯罪，在每种犯罪上，我都希望有一个倒数的进度条。我已经使其在第一个上起作用，但是正如我在代码上看到的那样，关键帧并没有进入特定的div，而是所有具有“填充”动画的事物。由于这些犯罪的冷却时间不同，因此我需要让它们显示出其他进程之后的其他进展。

<div class="bar">
  <div class="in"></div>
</div>

.bar {
  border: 1px solid #666;
  height: 20px;
  width: 100%;
}

.in {
    animation: fill 20s linear 1;
    height: 100%;
    background-color: pink;
}

@keyframes fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

Answer 1

我认为您需要发布更多代码以使我们准确地了解您的工作。根据您到目前为止的解释，我认为您只需要创建更多关键帧并将它们分配给您想要的犯罪即可。因此，如果每个犯罪部门都有这个

<div class="bar">
  <div class="in"></div>
</div>

然后您可以为每种罪行更改内部div的名称。例如：

<div class="bar">
  <div class="in-1"></div>      //bar for crime 1
</div>

<div class="bar">
  <div class="in-2"></div>      //bar for crime 2
</div>

.in-1 {
  animation: fill1 20s linear 1;
  height: 100%;
  background-color: pink;
}

.in-2 {
  animation: fill2 20s linear 1;
  height: 100%;
  background-color: pink;
}

@keyframes fill1 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes fill2 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

，以此类推。希望能有所帮助：）

如何在同一页面上运行多个关键帧

1 个答案: