html - 如何通过单击按钮来改变按钮的图像？

Question

我希望将按钮的图像更改为另一张相同大小的图片，并在一定时间后改回原样。例如，你点击一张房子的图片，它会变成天空，然后没有任何 Action 回到房子。第二张图片变回第一张之间的时间不应阻止再次单击按钮。

因此，由于我是新手，所以我进行了很多搜索，但找不到有关我的问题或我理解的内容。我在 HTML 中制作了一个按钮，在 CSS 中链接了一个类，该类具有应该充当按钮的图像的 URL。到目前为止，它有效。我该如何继续？

 -> HTML
<button class="buttonn" > 
-> CSS
.buttonn {
 background-image:url([Link to the image]);

Answer 1

您可以考虑激活状态的转换和延迟:

button {
  padding:20px;
  border:none;
  background-image:
    url(https://picsum.photos/id/1/200/200),
    url(https://picsum.photos/id/10/200/200);
  background-size:0 0,cover; /* The top one invisible*/
  background-position:center;
  background-repeat:no-repeat;
  transition: 0s 1s;
}
button:active {
  background-size:100% 100%,cover;
  transition: 0s;
}

<button>click me</button>

也像这样:

button {
  padding:20px;
  border:none;
  background-image:
    url(https://picsum.photos/id/10/200/200);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition: 0s 1s;
}
button:active {
  background-image:
    url(https://picsum.photos/id/1/200/200);
  transition: 0s;
}

<button>click me</button>