仅按钮触发动画 CSS

Question

我一直在开发这款游戏，点击幽灵它们就会消失。我不太擅长JavaScript，所以我找到了一种方法来仅使用CSS 来制作由按钮触发的动画。问题是当我点击重影时它消失了，但是当我再次点击时重影又出现了。我认为这是因为我正在使用焦点，但我不确定。如果有一种方法可以在不使用 JavaScript 的情况下解决这个问题，那就太好了。

 div {
  text-align: center;
}

.ghost1 {
  font-size: 14px;
  border-radius: 50px;
  border: none;
  background-color: transparent;
}

.ghost2 {
  font-size: 14px;
  border-radius: 50px;
  border: none;
  background-color: transparent;
}

@keyframes ghost1 {
  0% {
    font-size: 14px;
  }
  100% {
    font-size: 0px;
  }
}

#btn1:focus {
  animation-name: ghost1;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes ghost2 {
  0% {
    font-size: 14px;
  }
  100% {
    font-size: 0px;
  }
}

#btn2:focus {
  animation-name: ghost2;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

<button class="ghost1" id="btn1"></button>
<button class="ghost2" id="btn2"></button>

Answer 1

您可以使用“显示：none;”在您的 styles.css 中或将 html 作为函数输入：

<body>
  <button onclick="style.display = 'none'">
    
  </button>
  <button onclick="style.display = 'none'">
    
  </button>
</body>

仅按钮触发动画 CSS

Button trigger animation CSS only

html

css

animation

button