JSFiddle - React, Tailwind, and code Playground

by daria_markova

HTML

<body>
  <label>
    <input type="checkbox">
    <img class="duck-1" src="https://thumbs.gfycat.com/EasyMerryAnteater-size_restricted.gif" alt="duck">
  </label>
  <label>
    <input type="checkbox">
    <img class="duck-2" src="https://thumbs.gfycat.com/EasyMerryAnteater-size_restricted.gif" alt="duck">
  </label>
  <label>
    <input type="checkbox">
    <img class="duck-3" src="https://thumbs.gfycat.com/EasyMerryAnteater-size_restricted.gif" alt="duck">
  </label>
  <h1>Score</h1>
</body>

CSS

@keyframes duck-fly {
    0% {
      left: 0px;
      top: random(75) + vh;
    }
    
    50% {
      left: 50%;
      top: random(75) + vh;
    }
    
    100% {
      left: 90%;
      top: random(75) + vh;
    }
}

@keyframes duck-fly-2 {
    0% {
      left: 0px;
      top: random(75) + vh;
    }
    
    50% {
      left: 50%;
      top: random(75) + vh;
    }
    
    100% {
      left: 90%;
      top: random(75) + vh;
    }
}

@keyframes duck-fly-3 {
    0% {
      left: 0px;
      top: random(75) + vh;
    }
    
    50% {
      left: 50%;
      top: random(75) + vh;
    }
    
    100% {
      left: 90%;
      top: random(75) + vh;
    }
}

body {
  background-image: url(https://i.ytimg.com/vi/i9R8MqilMW8/maxresdefault.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
  counter-reset: count;
  position: relative;
}

h1 {
  position: absolute;
  bottom: -16px;
  left: 32px;
}

input[type="checkbox"] {
  position: absolute;
  visibility: hidden;
  left: -999999px;
}

.duck-1 {
  position: absolute;
  animation: duck-fly 5s ease 0s 1 normal;
}

.duck-2 {
  position: absolute;
  animation: duck-fly-2 5s ease 1s 1 normal;
}

.duck-3 {
  position: absolute;
  animation: duck-fly-3 5s ease 2s 1 normal;
}

img {
  width: 50px;
}

input[type="checkbox"]:checked {
  counter-increment: count;
}

h1::after {
  content: ' ' counter(count);
}