Choix du personnage avec animation de la carte d'aperçu (sprites CSS)

525 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Choix du personnage avec animation de la carte d'aperçu (sprites CSS)

Recommandé

9 May 2024

Illustration de phare de jour et de nuit

26 August 2025

Animation HTML sur l'anxiété : texte clignotant

29 December 2024

ki ok jour du New Jersey

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

Recommandé

Illustration de phare de jour et de nuit

Animation HTML sur l'anxiété : texte clignotant

ki ok jour du New Jersey

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS