<h2>一个简单的配对游戏</h2>
<div class="box">
  <label>
    <input type="checkbox" class="checkbox" id="chk1">
    <i></i>
  </label>
  <label>
    <input type="checkbox" class="checkbox" id="chk2">
    <i></i>
  </label>
  <label>
    <input type="checkbox" class="checkbox" id="chk3">
    <i></i>
  </label>
</div>
<button class="reset">重新开始</button>

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}
h2 
{
  margin-bottom: 30px;
  font-size: 2.5em;
}
.box 
{
  position: relative;
  width: 600px;
  height: 200px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-bottom: 2px solid #555;
}
.box label
{
  position: relative;
  height: 33.333%;
  width: 100%;
  border: 2px solid #555;
  border-bottom: none;
}
.box label input 
{
  appearance: none;
}
.box label i 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 600px;
} 
.box label:nth-child(1) i
{
  background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.3324c916f2ef8a914a30a8a4d3131734?rik=DJWAjiAHtUbfpQ&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f9%2f49%2f256ae4988b.jpg&ehk=juxYR8KUKG1MbFea%2fp5iwzJ%2bH2JI8OmKcHC79%2bI09sc%3d&risl=&pid=ImgRaw&r=0);
  animation: animate 0.5s steps(3) infinite;
}
.box label:nth-child(2) i
{
  background-image: url(https://pic.3gbizhi.com/2019/0924/20190924100240778.jpg);
  animation: animate 0.4s steps(3) infinite;
}
.box label:nth-child(3) i
{
  background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.84545b57566a6b0e24065537ac5a85fe?rik=UM6QIlAe7SmtPg&riu=http%3a%2f%2fpic.qqbizhi.com%2fallimg%2fbbpic%2f38%2f2638_7.jpg&ehk=0F%2fwXHtjL%2ba9Q9N6SvzjtCVXaoaYZT7tXxPMq2ICbGk%3d&risl=&pid=ImgRaw&r=0);
  animation: animate 0.7s steps(3) infinite;
}
@keyframes animate 
{
  0% 
  {
    background-position: 0px;
  }
  100% 
  {
    background-position: 600px;
  }
}
.box label input:checked ~ i 
{
  animation-play-state: paused;
}
.reset 
{
  margin-top: 40px;
  border: none;
  font-size: 1.25em;
  padding: 10px 25px;
  background: #333;
  color: #fff;
}
.reset:active
{
  background: #d63c3c;
  transform: scale(0.95);
}

let chk1 = document.querySelector('#chk1');
let chk2 = document.querySelector('#chk2');
let chk3 = document.querySelector('#chk3');
let reset = document.querySelector('.reset');
chk1.onclick = function(){
  if (chk1.checked  === true)
  {
    chk1.disabled = 'true'
  }
}
chk2.onclick = function(){
  if (chk2.checked  === true)
  {
    chk2.disabled = 'true'
  }
}
chk3.onclick = function(){
  if (chk3.checked  === true)
  {
    chk3.disabled = 'true'
  }
}
reset.onclick = function(){
  chk1.disabled = false;
  chk1.checked = false;

  chk2.disabled = false;
  chk2.checked = false;

  chk3.disabled = false;
  chk3.checked = false;
}