<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>
  
  <a id="start" href="#stage">
    <span class="start-text">
      insert coin<span class="start-emoji">💰</span>
    </span>
  </a>
</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;
  --total-bullseye: 8;
  --bullseye-animation-duration: 2.4s;
  --score-delay: calc(
    var(--bullseye-animation-duration) * var(--total-bullseye)
  );
  --bg-color: blue;
  --text-color: white;
  --accent-color: lime;

  counter-reset: points;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 86" width="42" height="42"><path d="M42.998 0C19.252 0 0 19.252 0 43c0 23.749 19.252 43 42.998 43C66.748 86 86 66.749 86 43 86 19.252 66.748 0 42.998 0zM46.5 77.825V58.5h-7.002v19.325C22.965 76.184 9.818 63.035 8.176 46.5H27.5v-7.002H8.176C9.818 22.964 22.965 9.816 39.498 8.175V27.5H46.5V8.175c16.537 1.642 29.684 14.79 31.326 31.323H58.5V46.5h19.326C76.184 63.035 63.037 76.182 46.5 77.825z" fill="%2353FF45"/></svg>')
      21 21,
    crosshair;
}

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

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

#start {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  text-align: center;
  text-decoration: none;
  color: var(--text-color);
  text-shadow: 2px 2px 0 red;
  background-color: var(--bg-color);
}

#stage:target #start {
  display: none;
}

.start-text {
  animation: pulse 1.2s ease-out infinite;
}

.start-emoji {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 1.4em;
  text-shadow: none;
}

.bullseye-input {
  position: absolute;
  left: -9999px;
  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: absolute;
  top: calc(-1 * var(--bullseye-total-size));
  animation-timing-function: ease-out;
  animation-duration: var(--bullseye-animation-duration);
  animation-delay: calc(
    var(--bullseye-animation-duration) * (var(--index) - 1)
  );
}

#stage:target .bullseye {
  animation-name: bullseye-movement;
}

.bullseye:nth-of-type(1) {
  --index: 1;
  left: 70%;
}

.bullseye:nth-of-type(2) {
  --index: 2;
  left: 10%;
}

.bullseye:nth-of-type(3) {
  --index: 3;
  left: 80%;
}

.bullseye:nth-of-type(4) {
  --index: 4;
  left: 55%;
}

.bullseye:nth-of-type(5) {
  --index: 5;
  left: 5%;
}

.bullseye:nth-of-type(6) {
  --index: 6;
  left: 35%;
}

.bullseye:nth-of-type(7) {
  --index: 7;
  left: 40%;
}

.bullseye:nth-of-type(8) {
  --index: 8;
  left: 85%;
}

.bullseye-input:checked + .bullseye {
  animation-play-state: paused;
  pointer-events: none;
}

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

.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);
}

.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;
}

#stage:target #score {
  animation: score-end 0.4s ease-in-out var(--score-delay) forwards;
}

#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;
  }
}

@keyframes bullseye-movement {
  100% {
    transform: translateY(calc(102vh + var(--bullseye-total-size)));
  }
}

@keyframes score-end {
  100% {
    transform: translateY(calc(100% - 50vh)) scale(2.2);
  }
}

@keyframes pulse {
  30% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
// 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.