Scelta del personaggio con animazione della scheda di anteprima (sprite CSS)

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

27 June 2025

<div id="app">
  <header>
    <h1>Pick your character</h1>
    <div class="additional">
      <small>support keyboard arrows (while focus)</small>
      <kbd>←</kbd>
      <kbd>→</kbd>
    </div>
  </header>
  <main class="container">
    <div class="characters">
      <div>
        <input type="radio" name="character" id="character-1" aria-hidden="true" tabindex="1" checked autofocus/>
        <label for="character-1" class="character">
          <img src="https://assets.codepen.io/36869/cat-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-2" aria-hidden="true"/>
        <label for="character-2" class="character">
          <img src="https://assets.codepen.io/36869/spider-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-3" aria-hidden="true"/>
        <label for="character-3" class="character">
          <img src="https://assets.codepen.io/36869/cow-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-4" aria-hidden="true"/>
        <label for="character-4" class="character">
          <img src="https://assets.codepen.io/36869/creeper-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-5" aria-hidden="true"/>
        <label for="character-5" class="character">
          <img src="https://assets.codepen.io/36869/enderman-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-6" aria-hidden="true"/>
        <label for="character-6" class="character">
          <img src="https://assets.codepen.io/36869/evoker-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-7" aria-hidden="true"/>
        <label for="character-7" class="character">
          <img src="https://assets.codepen.io/36869/golem-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-8" aria-hidden="true"/>
        <label for="character-8" class="character">
          <img src="https://assets.codepen.io/36869/horse-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-9" aria-hidden="true"/>
        <label for="character-9" class="character">
          <img src="https://assets.codepen.io/36869/ocelot-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-10" aria-hidden="true"/>
        <label for="character-10" class="character">
          <img src="https://assets.codepen.io/36869/panda-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-11" aria-hidden="true"/>
        <label for="character-11" class="character">
          <img src="https://assets.codepen.io/36869/skeleton-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-12" aria-hidden="true"/>
        <label for="character-12" class="character">
          <img src="https://assets.codepen.io/36869/wolf-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-13" aria-hidden="true"/>
        <label for="character-13" class="character">
          <img src="https://assets.codepen.io/36869/squid-preview.png" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-14" aria-hidden="true"/>
        <label for="character-14" class="character">
          <img src="https://assets.codepen.io/36869/fox-preview.webp" alt="">
        </label>
      </div>
      <div>
        <input type="radio" name="character" id="character-15" aria-hidden="true"/>
        <label for="character-15" class="character">
          <img src="https://assets.codepen.io/36869/villager-preview.webp" alt="">
        </label>
      </div>
    </div>

<div class="preview">
      <div class="preview-container">
        <div class="sprite-container">
          <div class="sprite"></div>
          <div class="sprite-direction">
            <input type="radio" name="direction" checked>
            <input type="radio" name="direction">
          </div>
        </div>
        <div class="sprite-stats">
          <dl>
            <dt>Current frame:</dt>
            <dd class="sprite-tw"></dd>
            <dt>Current col:</dt>
            <dd class="sprite-cc"></dd>
            <dt>Current row:</dt>
            <dd class="sprite-cr"></dd>
            <dt>
              <label for="select-fps">FPS:</label>
            </dt>
            <dd class="sprite-fps">
              <select id="select-fps">
                <option value="12">12</option>
                <option value="24">24</option>
                <option value="48" selected>48</option>
                <option value="64">64</option>
                <option value="76">76</option>
                <option value="100">100</option>
              </select>
            </dd>
          </dl>
        </div>
      </div>

</div>
  </main>
  <footer>
    <small style="color: hsl(0deg 0% 100% / 50%);">Support mobile devices</small>
  </footer>
</div>

CSS

@font-face {
  font-family: 'Minecraft';
  src: url('https://assets.codepen.io/36869/MinecraftTen-VGORe.woff') format('woff');
}

@layer reset {
  :root {
    font-family: "Minecraft", sans-serif;
    font-optical-sizing: auto;
    line-height: 1.5;
    font-weight: 400;

font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

* {
    margin: 0;
  }

@media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: grid;
    place-content: center;
    background-color: #333;
    padding: 1rem;
  }

ul {
    padding: 0;
    list-style: none;
  }
}

@layer main {
  /* Frame start position */
  @property --sprite-fs {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false
  }

:root {
    /* animation duration */
    /*--sprite-as: .8s;*/
    /* animation direction */
    --sprite-ad: normal;
    /* animation fill mode */
    --sprite-af: none;
    /* animation play state */
    --sprite-ap: running;
    /* animation iteration count */
    --sprite-ai: infinite;
    /* animation timing function */
    --sprite-at: linear;
    /* animation frame rate */
    --sprite-fr: 48;

/*--image-1: url(/cat.webp);*/
    --image-1: url(https://assets.codepen.io/36869/cat.webp);
    /*--image-2: url(/spider.webp);*/
    --image-2: url(https://assets.codepen.io/36869/spider.webp);
    /*--image-3: url(/cow.webp);*/
    --image-3: url(https://assets.codepen.io/36869/cow.webp);
    /*--image-4: url(/creeper.webp);*/
    --image-4: url(https://assets.codepen.io/36869/creeper.webp);
    /*--image-5: url(/enderman.webp);*/
    --image-5: url(https://assets.codepen.io/36869/enderman.webp);
    /*--image-6: url(/evoker.webp);*/
    --image-6: url(https://assets.codepen.io/36869/evoker.webp);
    /*--image-7: url(/golem.webp);*/
    --image-7: url(https://assets.codepen.io/36869/golem.webp);
    /*--image-8: url(/horse.webp);*/
    --image-8: url(https://assets.codepen.io/36869/horse.webp);
    /*--image-9: url(/ocelot.webp);*/
    --image-9: url(https://assets.codepen.io/36869/ocelot.webp);
    /*--image-10: url(/panda.webp);*/
    --image-10: url(https://assets.codepen.io/36869/panda.webp);
    /*--image-11: url(/skeleton.webp);*/
    --image-11: url(https://assets.codepen.io/36869/skeleton.webp);
    /*--image-12: url(/wolf.webp);*/
    --image-12: url(https://assets.codepen.io/36869/wolf.webp);
    /*--image-13: url(/squid.webp);*/
    --image-13: url(https://assets.codepen.io/36869/squid.webp);
    /*--image-14: url(/fox.webp);*/
    --image-14: url(https://assets.codepen.io/36869/fox.webp);
    /*--image-15: url(/villager.webp);*/
    --image-15: url(https://assets.codepen.io/36869/villager.webp);

--characater-1: 'Cat';
    --characater-2: 'Spider';
    --characater-3: 'Cow';
    --characater-4: 'Creeper';
    --characater-5: 'Enderman';
    --characater-6: 'Evoker';
    --characater-7: 'Steel golem';
    --characater-8: 'Skeleton horse';
    --characater-9: 'Ocelot';
    --characater-10: 'Panda';
    --characater-11: 'Skeleton';
    --characater-12: 'Wolf';
    --characater-13: 'Squid';
    --characater-14: 'Fox';
    --characater-15: 'Villager';
  }
}

@media (width < 940px) {
  #app {
    main {
      .characters {
        grid-template-columns: repeat(3, minmax(110px, 1fr));
        grid-template-rows: repeat(5, 160px);
      }

.preview {
        position: sticky;
        top: .5rem;
        height: fit-content;

.preview-container {
          --sprite-tw: 220;
        }
      }
    }
  }
}

@media (width < 680px) {
  #app {
    header {
      > div {
        & > small {
          display: none;
        }
      }
    }

main {
      .characters {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
        grid-template-rows: repeat(8, 160px);
      }
    }
  }
}

@media (width < 560px) {
  #app {
    header {
      > div.additional {
        display: none;

kbd {
          width: 36px;
          font-size: 1.25rem;
        }
      }
    }

main.container {
      gap: 1rem;

.characters {
        grid-template-columns: repeat(2, minmax(90px, 1fr));
        grid-template-rows: repeat(8, 120px);

> div {
          .character > img {
            max-width: 50px;
            max-height: 50px;
          }
        }
      }

.preview {
        .preview-container {
          --sprite-tw: 160;

.sprite-stats {
            font-size: .7rem;
          }
        }
      }
    }
  }
}

@media (width < 435px) {
  #app {
    main.container {
      .characters {
        grid-template-columns: repeat(1, minmax(90px, 1fr));
        grid-template-rows: repeat(15, 100px);
      }
    }
  }
}

@media (prefers-reduced-motion) {
  * {
    animation: none;
  }
}

@keyframes frame {
  to {
    --sprite-fs: var(--sprite-fe);
  }
}

#app {
  display: grid;
  gap: 1rem;

header {
    display: flex;
    justify-content: space-between;
    align-items: center;

h1 {
      --color: black;
      --shadow-width: 2px;
      --shadow-width-negative: calc(2px * -1);
      color: white;
      font-size: clamp(1.25rem, 0.875rem + 2vw, 2rem);
      text-box: trim-both cap alphabetic;
      text-shadow: 0 var(--shadow-width) 0 var(--color),
      var(--shadow-width) 0 0 var(--color),
      var(--shadow-width) var(--shadow-width) 0 var(--color),
      var(--shadow-width-negative) var(--shadow-width-negative) 0 var(--color),
      var(--shadow-width) var(--shadow-width-negative) 0 var(--color),
      var(--shadow-width-negative) var(--shadow-width) 0 var(--color);
    }

& > div {
      display: flex;
      gap: 1rem;
      align-items: flex-end;
      opacity: .5;

small {
        color: white;
        width: 10rem;
        text-align: right
      }

kbd {
        border: 2px solid #5e5e5e;
        box-shadow: 6px 6px #222222;
        font-size: 1.25rem;
        font-weight: 600;
        white-space: nowrap;
        height: 100%;
        aspect-ratio: 1 / 1;
        width: 40px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        background: #fff;
      }
    }
  }

main {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr auto;
  }
}

div.characters {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  grid-template-rows: repeat(3, 160px);
  padding: .5rem;
  background-color: black;
  box-shadow: 6px 6px #222222;
  border: 2px solid #999999;

> div {
    position: relative;
    background-color: #181818;
    overflow: hidden;
    display: grid;
    place-items: center;

&:has(input:checked) {
      overflow: visible;
      background-color: #4c8ee1;

.character > img {
        scale: 1.2;
        opacity: 1;
        --color: #ffda0e;
      }
    }

input {
      width: 100%;
      height: 100%;
      position: absolute;
      appearance: none;
      cursor: pointer;
      z-index: 1;

&:checked {
        outline-offset: 0;
        outline: 0;
        border: 6px double black;
      }

&:focus, &:focus-visible {
        outline: 0;
      }
    }

label {
      display: block;
    }

& > .character {
      img {
        max-width: 70px;
        max-height: 70px;
        width: auto;
        transition: scale 0.2s ease;
        opacity: .75;
        --color: white;
        filter: drop-shadow(0px 1px 0px var(--color)) drop-shadow(-1px 0px 0px var(--color)) drop-shadow(1px 0px 0px var(--color)) drop-shadow(0px 1px 0px var(--color)) drop-shadow(0px -1px 0px var(--color)) drop-shadow(1px 0px 0px var(--color));
      }
    }
  }
}

.characters:has(div:nth-child(1) > input:checked) + .preview {
  --name: var(--characater-1);

& > .preview-container {
    --sprite-image: var(--image-1);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 5364;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 42;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(2) > input:checked) + .preview {
  --name: var(--characater-2);

& > .preview-container {
    --sprite-image: var(--image-2);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 3576;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 28;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(3) > input:checked) + .preview {
  --name: var(--characater-3);

& > .preview-container {
    --sprite-image: var(--image-3);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 7152;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 60;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(4) > input:checked) + .preview {
  --name: var(--characater-4);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-4);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 6556;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 55;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(5) > input:checked) + .preview {
  --name: var(--characater-5);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-5);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 6556;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 55;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(6) > input:checked) + .preview {
  --name: var(--characater-6);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-6);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 11920;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 99;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(7) > input:checked) + .preview {
  --name: var(--characater-7);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-7);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 8940;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 72;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(8) > input:checked) + .preview {
  --name: var(--characater-8);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-8);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 5960;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 47;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(9) > input:checked) + .preview {
  --name: var(--characater-9);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-9);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 4768;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 37;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(10) > input:checked) + .preview {
  --name: var(--characater-10);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-10);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 10728;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 88;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(11) > input:checked) + .preview {
  --name: var(--characater-11);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-11);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 7748;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 65;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(12) > input:checked) + .preview {
  --name: var(--characater-12);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-12);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 7152;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 58;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(13) > input:checked) + .preview {
  --name: var(--characater-13);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-13);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 12516;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 104;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(14) > input:checked) + .preview {
  --name: var(--characater-14);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-14);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 8344;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 69;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

.characters:has(div:nth-child(15) > input:checked) + .preview {
  --name: var(--characater-15);

& > .preview-container {
    /* sprite image */
    --sprite-image: var(--image-15);
    /* sprite columns */
    --sprite-c: 5;
    /* sprite image height */
    --sprite-h: 4768;
    /* sprite image width */
    --sprite-w: 2980;
    /* Frame frames */
    --sprite-f: 37;
    /* Frame end position */
    --sprite-fe: calc(var(--sprite-f) - 1);
  }
}

div.preview {
  display: grid;
  position: relative;
  grid-template-rows: auto 1fr;
  place-items: center;
  gap: .5rem;
  padding: .5rem;
  background-color: black;
  border: 2px solid #4c8ee1;
  box-shadow: 6px 6px #222222;
  user-select: none;

&:before {
    content: var(--name);
    background: #adcbf1;
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 2.5rem;
    font-weight: 700;
    font-size: 1.25rem;
    box-sizing: border-box;
  }

& > .preview-container {
    height: 100%;
    width: 100%;
    display: grid;
    gap: .5rem;
    place-items: center;
    place-content: center;
    grid-template-rows: 1fr auto;
    counter-reset: num var(--sprite-cf) col var(--sprite-cc) row var(--sprite-cr);

/* frame target width */
    --sprite-tw: 260;
    --sprite-r: round(up, calc(var(--sprite-f) / var(--sprite-c)), 1);

--sprite-sw: calc(var(--sprite-w) / var(--sprite-c));
    --sprite-ar: calc(var(--sprite-tw) / var(--sprite-sw));
    --sprite-uh: calc(var(--sprite-h) * var(--sprite-ar));
    --sprite-uw: calc(var(--sprite-w) * var(--sprite-ar));
    --sprite-th: calc(var(--sprite-uh) / var(--sprite-r));
    --sprite-as: calc(var(--sprite-f) / var(--sprite-fr) * 1s);

--sprite-cf: calc(var(--sprite-fs) + 1);
    --sprite-cc: calc(mod(var(--sprite-fs), var(--sprite-c)) + 1);
    --sprite-cr: calc(round(down, calc(calc(var(--sprite-tw) * var(--sprite-fs)) / var(--sprite-uw)), 1) + 1);
    /* Y position, round to check next ROW */
    --row: calc(round(down, calc(calc(var(--sprite-tw) * var(--sprite-fs)) / var(--sprite-uw)), 1) * var(--sprite-th));
    /* X position, mod to check COLUMN */
    --col: mod(calc(var(--sprite-tw) * var(--sprite-fs)), var(--sprite-uw));
    /* animation duration based on frame rate */
    animation: frame var(--sprite-as) var(--sprite-at) 0s var(--sprite-ai) var(--sprite-ad) var(--sprite-af) var(--sprite-ap);

& > .sprite-container {
      position: relative;
      z-index: 1;
      background-color: white;
      height: 100%;

&:has(> div input[type="radio"]:nth-child(2):checked) {
        .sprite {
          scale: -1 1;

&:hover {
            scale: -1.4 1.4;
          }
        }
      }

.sprite-direction {
        position: absolute;
        right: 0;
        bottom: 0;
        display: flex;

input {
          appearance: none;
          width: 26px;
          height: 28px;

&:before {
            font-size: 1.25rem;
            opacity: .25;
            cursor: pointer;
          }

&:checked {
            &:before {
              opacity: .5;
            }
          }

&:first-child {
            &:before {
              content: "◀️";
            }
          }

&:last-child {
            &:before {
              content: "▶️";
            }
          }
        }
      }

.sprite {
        top: 50%;
        position: relative;
        translate: 0 -50%;
        filter: drop-shadow(2px 4px 6px black);
        height: calc(1px * var(--sprite-th));
        width: calc(1px * var(--sprite-tw));
        background-image: var(--sprite-image);
        background-size: calc(1px * var(--sprite-uw)) calc(1px * var(--sprite-uh));
        background-position: calc(-1px * var(--col)) calc(-1px * var(--row));
        z-index: 1;
        will-change: scale;
        transition: scale 0.2s ease;

&:hover {
          scale: 1.4;
          --color: #ffda0e;
          filter: drop-shadow(0px 1px 0px var(--color)) drop-shadow(-1px 0px 0px var(--color)) drop-shadow(1px 0px 0px var(--color)) drop-shadow(0px 1px 0px var(--color)) drop-shadow(0px -1px 0px var(--color)) drop-shadow(1px 0px 0px var(--color)) drop-shadow(2px 4px 6px black);
        }
      }
    }

&:has(.sprite-stats .sprite-fps select option[value="12"]:checked) {
      --sprite-fr: 12;
    }

&:has(.sprite-stats .sprite-fps select option[value="24"]:checked) {
      --sprite-fr: 36;
    }

&:has(.sprite-stats .sprite-fps select option[value="36"]:checked) {
      --sprite-fr: 36;
    }

&:has(.sprite-stats .sprite-fps select option[value="48"]:checked) {
      --sprite-fr: 48;
    }

&:has(.sprite-stats .sprite-fps select option[value="64"]:checked) {
      --sprite-fr: 64;
    }

&:has(.sprite-stats .sprite-fps select option[value="76"]:checked) {
      --sprite-fr: 76;
    }

&:has(.sprite-stats .sprite-fps select option[value="100"]:checked) {
      --sprite-fr: 100;
    }

& > .sprite-stats {
      background: #adcbf1;
      position: relative;
      width: 100%;
      height: 100%;
      padding: .5rem;

dl {
        display: grid;
        grid-template-columns: 1fr auto;

dt, dd {
          &:not(:last-of-type) {
            border-bottom: 1px solid #99b3d3;
          }
        }

dd {
          font-weight: bold;
          font-variant-numeric: tabular-nums;
          text-align: right;

&.sprite-c {
            &:before {
              counter-reset: variable var(--sprite-c);
              content: counter(variable);
            }
          }

&.sprite-r {
            &:before {
              counter-reset: variable var(--sprite-r);
              content: counter(variable);
            }
          }

&.sprite-fps {
            select {
              background: transparent;
              border: 0;
              outline: none;
              padding: 0;
              font-weight: 700;
              font-family: inherit;
              font-size: inherit;
              color: #2949c5;
            }
          }

&.sprite-fr {
            &:before {
              counter-reset: variable var(--sprite-f);
              content: counter(variable);
            }
          }

&.sprite-tw {
            &:before {
              counter-reset: variable var(--sprite-f);
              content: counter(num) '/' counter(variable);
            }
          }

&.sprite-cc {
            &:before {
              counter-reset: variable var(--sprite-c);
              content: counter(col) '/' counter(variable);
            }
          }

&.sprite-cr {
            &:before {
              counter-reset: variable var(--sprite-r);
              content: counter(row) '/' counter(variable);
            }
          }
        }
      }
    }
  }
}

Scelta del personaggio con animazione della scheda di anteprima (sprite CSS)

Consigliato

Un codice di Mete

Un codice di Skyrreum

Un codice di Yotva

HTML

CSS

JS

Consigliato

Un codice di Mete

Un codice di Skyrreum

Un codice di Yotva

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS