仅按钮触发动画 CSS答案

【问题标题】：Button trigger animation CSS only仅按钮触发动画 CSS
【发布时间】：2021-10-15 21:56:29
【问题描述】：

我一直在开发这个游戏，你点击鬼魂就会消失。我不太擅长 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>

【问题讨论】：

你想要的动画是什么？
请更好地描述您想要发生的事情。

标签： html css animation button

【解决方案1】：

您可以使用“显示：无；”在你的 style.css 中或将 html 作为函数：

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

【讨论】：