<div id="stage">
  <input class="bullseye-input" id="b1" type="checkbox">
  <label class="bullseye" for="b1"></label>

  <input class="bullseye-input" id="b2" type="checkbox">
  <label class="bullseye" for="b2"></label>

  <input class="bullseye-input" id="b3" type="checkbox">
  <label class="bullseye" for="b3"></label>

  <input class="bullseye-input" id="b4" type="checkbox">
  <label class="bullseye" for="b4"></label>

  <input class="bullseye-input" id="b5" type="checkbox">
  <label class="bullseye" for="b5"></label>

  <input class="bullseye-input" id="b6" type="checkbox">
  <label class="bullseye" for="b6"></label>

  <input class="bullseye-input" id="b7" type="checkbox">
  <label class="bullseye" for="b7"></label>

  <input class="bullseye-input special" id="b8" type="checkbox">
  <label class="bullseye special" for="b8"></label>

  <p id="score"> points</p>
</div>
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");

:root {
  --bullseye-points: 1;
  --bullseye-points-str: "1";
  --bullseye-special-points: 3;
  --bullseye-special-points-str: "3";
  --bullseye-size: 7rem;
  --bullseye-shadow-size: 1rem;
  --bullseye-total-size: calc(
    var(--bullseye-size) + var(--bullseye-shadow-size) * 2
  );
  --bullseye-color: red;
  --bullseye-special-color: gold;
  --bg-color: blue;
  --text-color: white;
  --accent-color: lime;
  counter-reset: points;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 15px;
  overflow: hidden;
  font-family: "Press Start 2P", sans-serif;
  color: var(--text-color);
  background-color: var(--bg-color);
  user-select: none;
}

.bullseye-input {
  position: absolute;
  left: -99999px;
  opacity: 0;
}

.bullseye-input:checked {
  counter-increment: points var(--bullseye-points);
}

.bullseye-input.special:checked {
  counter-increment: points var(--bullseye-special-points);
}

.bullseye {
  --points: var(--bullseye-points);
  position: relative;
  display: inline-block;
}

.bullseye.special {
  --points: var(--bullseye-special-points);
}

.bullseye-input:checked + .bullseye {
  pointer-events: none;
}

.bullseye:before {
  --color: var(--bullseye-color);
  content: "";
  display: block;
  width: var(--bullseye-size);
  height: var(--bullseye-size);
  border-radius: 50%;
  background-image: radial-gradient(
    closest-side,
    var(--color) 20%,
    white 0,
    white 40%,
    var(--color) 0,
    var(--color) 60%,
    white 0,
    white 80%,
    var(--color) 0
  );
  box-shadow: 4px 4px var(--bullseye-shadow-size) rgba(0, 0, 0, 0.4);
  transition: opacity 0.8s ease-out, transform 0.1s ease-in;
}

.bullseye.special:before {
  --color: var(--bullseye-special-color);
}

.bullseye-input:checked + .bullseye:before {
  --color: grey;  
  animation: bullseye-fadeout 0.8s ease-in-out forwards;
}

.bullseye:after {
  --points-str: var(--bullseye-points-str);
  content: "+" var(--points-str);
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.7rem;
  text-shadow: 2px 2px 0px var(--accent-color);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.bullseye.special:after {
  --points-str: var(--bullseye-special-points-str);
}

.bullseye-input:checked + .bullseye:after {
  animation: points-up 1.5s forwards;
}

#score {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--accent-color);
  text-shadow: 2px 2px 0px red;
  pointer-events: none;
}

#score:before {
  content: counter(points);
}

@keyframes bullseye-fadeout {
  12% {
    transform: scale(0.95);
  }
  100% {
    opacity: 0;
  }
}

@keyframes points-up {
  10% {
    transform: translate(-50%, calc(-50% - 3rem));
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
// Nothing to see here

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.