Selección de personaje con animación de tarjeta de vista previa (sprites CSS)

108 zegarkidawida

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Selección de personaje con animación de tarjeta de vista previa (sprites CSS)

Recomendado

8 September 2024

Burbujas de hojas de sprites de lienzo

25 August 2024

Página biográfica animada / Acerca de

26 May 2025

Un código de Liamgilles76

HTML

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

Recomendado

Burbujas de hojas de sprites de lienzo

Página biográfica animada / Acerca de

Un código de Liamgilles76

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS