Webleb - Code-Snippets -

1988 Andev.web

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

10 April 2025

Beispiel für eine CSS-Fragmentanimation

HTML

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #212121;
  }

.brick {
    height: 2px;
    width: 2px;
    box-shadow: 2px 2px 0px #ff9999, 4px 2px 0px #ff9999, 6px 2px 0px #ff9999,
      8px 2px 0px #ff9999, 10px 2px 0px #ff9999, 12px 2px 0px #ff9999,
      14px 2px 0px #ff9999, 16px 2px 0px #ff9999, 18px 2px 0px #ff9999,
      20px 2px 0px #ff9999, 22px 2px 0px #ff9999, 24px 2px 0px #ff9999,
      26px 2px 0px #ff9999, 28px 2px 0px #ff9999, 30px 2px 0px #ff9999,
      32px 2px 0px #ff9999, 2px 4px 0px #cc3300, 4px 4px 0px #cc3300,
      6px 4px 0px #cc3300, 8px 4px 0px #cc3300, 10px 4px 0px #cc3300,
      12px 4px 0px #cc3300, 14px 4px 0px #cc3300, 16px 4px 0px #000,
      18px 4px 0px #cc3300, 20px 4px 0px #cc3300, 22px 4px 0px #cc3300,
      24px 4px 0px #cc3300, 26px 4px 0px #cc3300, 28px 4px 0px #cc3300,
      30px 4px 0px #cc3300, 32px 4px 0px #000, 2px 6px 0px #cc3300,
      4px 6px 0px #cc3300, 6px 6px 0px #cc3300, 8px 6px 0px #cc3300,
      10px 6px 0px #cc3300, 12px 6px 0px #cc3300, 14px 6px 0px #cc3300,
      16px 6px 0px #000, 18px 6px 0px #cc3300, 20px 6px 0px #cc3300,
      22px 6px 0px #cc3300, 24px 6px 0px #cc3300, 26px 6px 0px #cc3300,
      28px 6px 0px #cc3300, 30px 6px 0px #cc3300, 32px 6px 0px #000,
      2px 8px 0px #000, 4px 8px 0px #000, 6px 8px 0px #000, 8px 8px 0px #000,
      10px 8px 0px #000, 12px 8px 0px #000, 14px 8px 0px #000, 16px 8px 0px #000,
      18px 8px 0px #000, 20px 8px 0px #000, 22px 8px 0px #000, 24px 8px 0px #000,
      26px 8px 0px #000, 28px 8px 0px #000, 30px 8px 0px #000, 32px 8px 0px #000,
      2px 10px 0px #cc3300, 4px 10px 0px #cc3300, 6px 10px 0px #cc3300,
      8px 10px 0px #000, 10px 10px 0px #cc3300, 12px 10px 0px #cc3300,
      14px 10px 0px #cc3300, 16px 10px 0px #cc3300, 18px 10px 0px #cc3300,
      20px 10px 0px #cc3300, 22px 10px 0px #cc3300, 24px 10px 0px #000,
      26px 10px 0px #cc3300, 28px 10px 0px #cc3300, 30px 10px 0px #cc3300,
      32px 10px 0px #cc3300, 2px 12px 0px #cc3300, 4px 12px 0px #cc3300,
      6px 12px 0px #cc3300, 8px 12px 0px #000, 10px 12px 0px #cc3300,
      12px 12px 0px #cc3300, 14px 12px 0px #cc3300, 16px 12px 0px #cc3300,
      18px 12px 0px #cc3300, 20px 12px 0px #cc3300, 22px 12px 0px #cc3300,
      24px 12px 0px #000, 26px 12px 0px #cc3300, 28px 12px 0px #cc3300,
      30px 12px 0px #cc3300, 32px 12px 0px #cc3300, 2px 14px 0px #cc3300,
      4px 14px 0px #cc3300, 6px 14px 0px #cc3300, 8px 14px 0px #000,
      10px 14px 0px #cc3300, 12px 14px 0px #cc3300, 14px 14px 0px #cc3300,
      16px 14px 0px #cc3300, 18px 14px 0px #cc3300, 20px 14px 0px #cc3300,
      22px 14px 0px #cc3300, 24px 14px 0px #000, 26px 14px 0px #cc3300,
      28px 14px 0px #cc3300, 30px 14px 0px #cc3300, 32px 14px 0px #cc3300,
      2px 16px 0px #000, 4px 16px 0px #000, 6px 16px 0px #000, 8px 16px 0px #000,
      10px 16px 0px #000, 12px 16px 0px #000, 14px 16px 0px #000,
      16px 16px 0px #000, 18px 16px 0px #000, 20px 16px 0px #000,
      22px 16px 0px #000, 24px 16px 0px #000, 26px 16px 0px #000,
      28px 16px 0px #000, 30px 16px 0px #000, 32px 16px 0px #000,
      2px 18px 0px #cc3300, 4px 18px 0px #cc3300, 6px 18px 0px #cc3300,
      8px 18px 0px #cc3300, 10px 18px 0px #cc3300, 12px 18px 0px #cc3300,
      14px 18px 0px #cc3300, 16px 18px 0px #000, 18px 18px 0px #cc3300,
      20px 18px 0px #cc3300, 22px 18px 0px #cc3300, 24px 18px 0px #cc3300,
      26px 18px 0px #cc3300, 28px 18px 0px #cc3300, 30px 18px 0px #cc3300,
      32px 18px 0px #000, 2px 20px 0px #cc3300, 4px 20px 0px #cc3300,
      6px 20px 0px #cc3300, 8px 20px 0px #cc3300, 10px 20px 0px #cc3300,
      12px 20px 0px #cc3300, 14px 20px 0px #cc3300, 16px 20px 0px #000,
      18px 20px 0px #cc3300, 20px 20px 0px #cc3300, 22px 20px 0px #cc3300,
      24px 20px 0px #cc3300, 26px 20px 0px #cc3300, 28px 20px 0px #cc3300,
      30px 20px 0px #cc3300, 32px 20px 0px #000, 2px 22px 0px #cc3300,
      4px 22px 0px #cc3300, 6px 22px 0px #cc3300, 8px 22px 0px #cc3300,
      10px 22px 0px #cc3300, 12px 22px 0px #cc3300, 14px 22px 0px #cc3300,
      16px 22px 0px #000, 18px 22px 0px #cc3300, 20px 22px 0px #cc3300,
      22px 22px 0px #cc3300, 24px 22px 0px #cc3300, 26px 22px 0px #cc3300,
      28px 22px 0px #cc3300, 30px 22px 0px #cc3300, 32px 22px 0px #000,
      2px 24px 0px #000, 4px 24px 0px #000, 6px 24px 0px #000, 8px 24px 0px #000,
      10px 24px 0px #000, 12px 24px 0px #000, 14px 24px 0px #000,
      16px 24px 0px #000, 18px 24px 0px #000, 20px 24px 0px #000,
      22px 24px 0px #000, 24px 24px 0px #000, 26px 24px 0px #000,
      28px 24px 0px #000, 30px 24px 0px #000, 32px 24px 0px #000,
      2px 26px 0px #cc3300, 4px 26px 0px #cc3300, 6px 26px 0px #cc3300,
      8px 26px 0px #000, 10px 26px 0px #cc3300, 12px 26px 0px #cc3300,
      14px 26px 0px #cc3300, 16px 26px 0px #cc3300, 18px 26px 0px #cc3300,
      20px 26px 0px #cc3300, 22px 26px 0px #cc3300, 24px 26px 0px #000,
      26px 26px 0px #cc3300, 28px 26px 0px #cc3300, 30px 26px 0px #cc3300,
      32px 26px 0px #cc3300, 2px 28px 0px #cc3300, 4px 28px 0px #cc3300,
      6px 28px 0px #cc3300, 8px 28px 0px #000, 10px 28px 0px #cc3300,
      12px 28px 0px #cc3300, 14px 28px 0px #cc3300, 16px 28px 0px #cc3300,
      18px 28px 0px #cc3300, 20px 28px 0px #cc3300, 22px 28px 0px #cc3300,
      24px 28px 0px #000, 26px 28px 0px #cc3300, 28px 28px 0px #cc3300,
      30px 28px 0px #cc3300, 32px 28px 0px #cc3300, 2px 30px 0px #cc3300,
      4px 30px 0px #cc3300, 6px 30px 0px #cc3300, 8px 30px 0px #000,
      10px 30px 0px #cc3300, 12px 30px 0px #cc3300, 14px 30px 0px #cc3300,
      16px 30px 0px #cc3300, 18px 30px 0px #cc3300, 20px 30px 0px #cc3300,
      22px 30px 0px #cc3300, 24px 30px 0px #000, 26px 30px 0px #cc3300,
      28px 30px 0px #cc3300, 30px 30px 0px #cc3300, 32px 30px 0px #cc3300,
      2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000, 8px 32px 0px #000,
      10px 32px 0px #000, 12px 32px 0px #000, 14px 32px 0px #000,
      16px 32px 0px #000, 18px 32px 0px #000, 20px 32px 0px #000,
      22px 32px 0px #000, 24px 32px 0px #000, 26px 32px 0px #000,
      28px 32px 0px #000, 30px 32px 0px #000, 32px 32px 0px #000;
  }
  .brick.one {
    transform: translateX(-60px);
  }
  .mush {
    height: 2px;
    width: 2px;
    box-shadow: 14px 2px 0px #fc9838, 16px 2px 0px #fc9838, 18px 2px 0px #fc9838,
      20px 2px 0px #fc9838, 12px 4px 0px #fc9838, 14px 4px 0px #fc9838,
      16px 4px 0px #fc9838, 18px 4px 0px #fc9838, 20px 4px 0px #d82800,
      22px 4px 0px #d82800, 10px 6px 0px #fc9838, 12px 6px 0px #fc9838,
      14px 6px 0px #fc9838, 16px 6px 0px #fc9838, 18px 6px 0px #d82800,
      20px 6px 0px #d82800, 22px 6px 0px #d82800, 24px 6px 0px #d82800,
      8px 8px 0px #fc9838, 10px 8px 0px #fc9838, 12px 8px 0px #fc9838,
      14px 8px 0px #fc9838, 16px 8px 0px #fc9838, 18px 8px 0px #d82800,
      20px 8px 0px #d82800, 22px 8px 0px #d82800, 24px 8px 0px #d82800,
      26px 8px 0px #d82800, 6px 10px 0px #fc9838, 8px 10px 0px #fc9838,
      10px 10px 0px #fc9838, 12px 10px 0px #fc9838, 14px 10px 0px #fc9838,
      16px 10px 0px #fc9838, 18px 10px 0px #fc9838, 20px 10px 0px #d82800,
      22px 10px 0px #d82800, 24px 10px 0px #d82800, 26px 10px 0px #fc9838,
      28px 10px 0px #fc9838, 4px 12px 0px #fc9838, 6px 12px 0px #fc9838,
      8px 12px 0px #d82800, 10px 12px 0px #d82800, 12px 12px 0px #d82800,
      14px 12px 0px #fc9838, 16px 12px 0px #fc9838, 18px 12px 0px #fc9838,
      20px 12px 0px #fc9838, 22px 12px 0px #fc9838, 24px 12px 0px #fc9838,
      26px 12px 0px #fc9838, 28px 12px 0px #fc9838, 30px 12px 0px #fc9838,
      4px 14px 0px #fc9838, 6px 14px 0px #d82800, 8px 14px 0px #d82800,
      10px 14px 0px #d82800, 12px 14px 0px #d82800, 14px 14px 0px #d82800,
      16px 14px 0px #fc9838, 18px 14px 0px #fc9838, 20px 14px 0px #fc9838,
      22px 14px 0px #fc9838, 24px 14px 0px #fc9838, 26px 14px 0px #fc9838,
      28px 14px 0px #fc9838, 30px 14px 0px #fc9838, 2px 16px 0px #fc9838,
      4px 16px 0px #fc9838, 6px 16px 0px #d82800, 8px 16px 0px #d82800,
      10px 16px 0px #d82800, 12px 16px 0px #d82800, 14px 16px 0px #d82800,
      16px 16px 0px #fc9838, 18px 16px 0px #fc9838, 20px 16px 0px #fc9838,
      22px 16px 0px #fc9838, 24px 16px 0px #fc9838, 26px 16px 0px #d82800,
      28px 16px 0px #d82800, 30px 16px 0px #fc9838, 32px 16px 0px #fc9838,
      2px 18px 0px #fc9838, 4px 18px 0px #fc9838, 6px 18px 0px #d82800,
      8px 18px 0px #d82800, 10px 18px 0px #d82800, 12px 18px 0px #d82800,
      14px 18px 0px #d82800, 16px 18px 0px #fc9838, 18px 18px 0px #fc9838,
      20px 18px 0px #fc9838, 22px 18px 0px #fc9838, 24px 18px 0px #fc9838,
      26px 18px 0px #d82800, 28px 18px 0px #d82800, 30px 18px 0px #d82800,
      32px 18px 0px #fc9838, 2px 20px 0px #fc9838, 4px 20px 0px #fc9838,
      6px 20px 0px #fc9838, 8px 20px 0px #d82800, 10px 20px 0px #d82800,
      12px 20px 0px #d82800, 14px 20px 0px #fc9838, 16px 20px 0px #fc9838,
      18px 20px 0px #fc9838, 20px 20px 0px #fc9838, 22px 20px 0px #fc9838,
      24px 20px 0px #fc9838, 26px 20px 0px #fc9838, 28px 20px 0px #d82800,
      30px 20px 0px #d82800, 32px 20px 0px #fc9838, 2px 22px 0px #fc9838,
      4px 22px 0px #fc9838, 6px 22px 0px #fc9838, 8px 22px 0px #fc9838,
      10px 22px 0px #fc9838, 12px 22px 0px #fc9838, 14px 22px 0px #fc9838,
      16px 22px 0px #fc9838, 18px 22px 0px #fc9838, 20px 22px 0px #fc9838,
      22px 22px 0px #fc9838, 24px 22px 0px #fc9838, 26px 22px 0px #fc9838,
      28px 22px 0px #fc9838, 30px 22px 0px #fc9838, 32px 22px 0px #fc9838,
      4px 24px 0px #fc9838, 6px 24px 0px #d82800, 8px 24px 0px #d82800,
      10px 24px 0px #d82800, 12px 24px 0px #fff, 14px 24px 0px #fff,
      16px 24px 0px #fff, 18px 24px 0px #fff, 20px 24px 0px #fff,
      22px 24px 0px #fff, 24px 24px 0px #d82800, 26px 24px 0px #d82800,
      28px 24px 0px #d82800, 30px 24px 0px #fc9838, 10px 26px 0px #fff,
      12px 26px 0px #fff, 14px 26px 0px #fff, 16px 26px 0px #fff,
      18px 26px 0px #fff, 20px 26px 0px #fff, 22px 26px 0px #fff,
      24px 26px 0px #fff, 10px 28px 0px #fff, 12px 28px 0px #fff,
      14px 28px 0px #fff, 16px 28px 0px #fff, 18px 28px 0px #fff,
      20px 28px 0px #fff, 22px 28px 0px #fc9838, 24px 28px 0px #fff,
      10px 30px 0px #fff, 12px 30px 0px #fff, 14px 30px 0px #fff,
      16px 30px 0px #fff, 18px 30px 0px #fff, 20px 30px 0px #fff,
      22px 30px 0px #fc9838, 24px 30px 0px #fff, 12px 32px 0px #fff,
      14px 32px 0px #fff, 16px 32px 0px #fff, 18px 32px 0px #fff,
      20px 32px 0px #fc9838, 22px 32px 0px #fff;
    transform: translate(-0px, -0px);
    z-index: -1;
    opacity: 0;
  }
  .box {
    position: absolute;
    background-color: rgba(46, 37, 37, 0);
    z-index: 3;
    width: 34px;
    height: 34px;
  }
  .box:hover + .mush {
    animation: mush 0.5s linear forwards;
    opacity: 1;
  }
  @keyframes mush {
    0% {
      transform: scale(0.8) translate(-0px, -0px);
    }
    50% {
      transform: scale(1.1) translate(-0px, -80px);
    }
    100% {
      transform: scale(1.1) translate(-0px, -35px);
    }
  }
  .tooltip-mario-container {
    height: 2px;
    width: 2px;
    box-shadow: 4px 2px 0px #ce3100, 6px 2px 0px #ce3100, 8px 2px 0px #ce3100,
      10px 2px 0px #ce3100, 12px 2px 0px #ce3100, 14px 2px 0px #ce3100,
      16px 2px 0px #ce3100, 18px 2px 0px #ce3100, 20px 2px 0px #ce3100,
      22px 2px 0px #ce3100, 24px 2px 0px #ce3100, 26px 2px 0px #ce3100,
      28px 2px 0px #ce3100, 30px 2px 0px #ce3100, 2px 4px 0px #ce3100,
      4px 4px 0px #ff9c31, 6px 4px 0px #ff9c31, 8px 4px 0px #ff9c31,
      10px 4px 0px #ff9c31, 12px 4px 0px #ff9c31, 14px 4px 0px #ff9c31,
      16px 4px 0px #ff9c31, 18px 4px 0px #ff9c31, 20px 4px 0px #ff9c31,
      22px 4px 0px #ff9c31, 24px 4px 0px #ff9c31, 26px 4px 0px #ff9c31,
      28px 4px 0px #ff9c31, 30px 4px 0px #ff9c31, 32px 4px 0px #000,
      2px 6px 0px #ce3100, 4px 6px 0px #ff9c31, 6px 6px 0px #000,
      8px 6px 0px #ff9c31, 10px 6px 0px #ff9c31, 12px 6px 0px #ff9c31,
      14px 6px 0px #ff9c31, 16px 6px 0px #ff9c31, 18px 6px 0px #ff9c31,
      20px 6px 0px #ff9c31, 22px 6px 0px #ff9c31, 24px 6px 0px #ff9c31,
      26px 6px 0px #ff9c31, 28px 6px 0px #000, 30px 6px 0px #ff9c31,
      32px 6px 0px #000, 2px 8px 0px #ce3100, 4px 8px 0px #ff9c31,
      6px 8px 0px #ff9c31, 8px 8px 0px #ff9c31, 10px 8px 0px #ff9c31,
      12px 8px 0px #ce3100, 14px 8px 0px #ce3100, 16px 8px 0px #ce3100,
      18px 8px 0px #ce3100, 20px 8px 0px #ce3100, 22px 8px 0px #ff9c31,
      24px 8px 0px #ff9c31, 26px 8px 0px #ff9c31, 28px 8px 0px #ff9c31,
      30px 8px 0px #ff9c31, 32px 8px 0px #000, 2px 10px 0px #ce3100,
      4px 10px 0px #ff9c31, 6px 10px 0px #ff9c31, 8px 10px 0px #ff9c31,
      10px 10px 0px #ce3100, 12px 10px 0px #ce3100, 14px 10px 0px #000,
      16px 10px 0px #000, 18px 10px 0px #000, 20px 10px 0px #ce3100,
      22px 10px 0px #ce3100, 24px 10px 0px #ff9c31, 26px 10px 0px #ff9c31,
      28px 10px 0px #ff9c31, 30px 10px 0px #ff9c31, 32px 10px 0px #000,
      2px 12px 0px #ce3100, 4px 12px 0px #ff9c31, 6px 12px 0px #ff9c31,
      8px 12px 0px #ff9c31, 10px 12px 0px #ce3100, 12px 12px 0px #ce3100,
      14px 12px 0px #000, 16px 12px 0px #ff9c31, 18px 12px 0px #ff9c31,
      20px 12px 0px #ce3100, 22px 12px 0px #ce3100, 24px 12px 0px #000,
      26px 12px 0px #ff9c31, 28px 12px 0px #ff9c31, 30px 12px 0px #ff9c31,
      32px 12px 0px #000, 2px 14px 0px #ce3100, 4px 14px 0px #ff9c31,
      6px 14px 0px #ff9c31, 8px 14px 0px #ff9c31, 10px 14px 0px #ce3100,
      12px 14px 0px #ce3100, 14px 14px 0px #000, 16px 14px 0px #ff9c31,
      18px 14px 0px #ff9c31, 20px 14px 0px #ce3100, 22px 14px 0px #ce3100,
      24px 14px 0px #000, 26px 14px 0px #ff9c31, 28px 14px 0px #ff9c31,
      30px 14px 0px #ff9c31, 32px 14px 0px #000, 2px 16px 0px #ce3100,
      4px 16px 0px #ff9c31, 6px 16px 0px #ff9c31, 8px 16px 0px #ff9c31,
      10px 16px 0px #ff9c31, 12px 16px 0px #000, 14px 16px 0px #000,
      16px 16px 0px #ff9c31, 18px 16px 0px #ce3100, 20px 16px 0px #ce3100,
      22px 16px 0px #ce3100, 24px 16px 0px #000, 26px 16px 0px #ff9c31,
      28px 16px 0px #ff9c31, 30px 16px 0px #ff9c31, 32px 16px 0px #000,
      2px 18px 0px #ce3100, 4px 18px 0px #ff9c31, 6px 18px 0px #ff9c31,
      8px 18px 0px #ff9c31, 10px 18px 0px #ff9c31, 12px 18px 0px #ff9c31,
      14px 18px 0px #ff9c31, 16px 18px 0px #ce3100, 18px 18px 0px #ce3100,
      20px 18px 0px #000, 22px 18px 0px #000, 24px 18px 0px #000,
      26px 18px 0px #ff9c31, 28px 18px 0px #ff9c31, 30px 18px 0px #ff9c31,
      32px 18px 0px #000, 2px 20px 0px #ce3100, 4px 20px 0px #ff9c31,
      6px 20px 0px #ff9c31, 8px 20px 0px #ff9c31, 10px 20px 0px #ff9c31,
      12px 20px 0px #ff9c31, 14px 20px 0px #ff9c31, 16px 20px 0px #ce3100,
      18px 20px 0px #ce3100, 20px 20px 0px #000, 22px 20px 0px #ff9c31,
      24px 20px 0px #ff9c31, 26px 20px 0px #ff9c31, 28px 20px 0px #ff9c31,
      30px 20px 0px #ff9c31, 32px 20px 0px #000, 2px 22px 0px #ce3100,
      4px 22px 0px #ff9c31, 6px 22px 0px #ff9c31, 8px 22px 0px #ff9c31,
      10px 22px 0px #ff9c31, 12px 22px 0px #ff9c31, 14px 22px 0px #ff9c31,
      16px 22px 0px #ff9c31, 18px 22px 0px #000, 20px 22px 0px #000,
      22px 22px 0px #ff9c31, 24px 22px 0px #ff9c31, 26px 22px 0px #ff9c31,
      28px 22px 0px #ff9c31, 30px 22px 0px #ff9c31, 32px 22px 0px #000,
      2px 24px 0px #ce3100, 4px 24px 0px #ff9c31, 6px 24px 0px #ff9c31,
      8px 24px 0px #ff9c31, 10px 24px 0px #ff9c31, 12px 24px 0px #ff9c31,
      14px 24px 0px #ff9c31, 16px 24px 0px #ce3100, 18px 24px 0px #ce3100,
      20px 24px 0px #ff9c31, 22px 24px 0px #ff9c31, 24px 24px 0px #ff9c31,
      26px 24px 0px #ff9c31, 28px 24px 0px #ff9c31, 30px 24px 0px #ff9c31,
      32px 24px 0px #000, 2px 26px 0px #ce3100, 4px 26px 0px #ff9c31,
      6px 26px 0px #ff9c31, 8px 26px 0px #ff9c31, 10px 26px 0px #ff9c31,
      12px 26px 0px #ff9c31, 14px 26px 0px #ff9c31, 16px 26px 0px #ce3100,
      18px 26px 0px #ce3100, 20px 26px 0px #000, 22px 26px 0px #ff9c31,
      24px 26px 0px #ff9c31, 26px 26px 0px #ff9c31, 28px 26px 0px #ff9c31,
      30px 26px 0px #ff9c31, 32px 26px 0px #000, 2px 28px 0px #ce3100,
      4px 28px 0px #ff9c31, 6px 28px 0px #000, 8px 28px 0px #ff9c31,
      10px 28px 0px #ff9c31, 12px 28px 0px #ff9c31, 14px 28px 0px #ff9c31,
      16px 28px 0px #ff9c31, 18px 28px 0px #000, 20px 28px 0px #000,
      22px 28px 0px #ff9c31, 24px 28px 0px #ff9c31, 26px 28px 0px #ff9c31,
      28px 28px 0px #000, 30px 28px 0px #ff9c31, 32px 28px 0px #000,
      2px 30px 0px #ce3100, 4px 30px 0px #ff9c31, 6px 30px 0px #ff9c31,
      8px 30px 0px #ff9c31, 10px 30px 0px #ff9c31, 12px 30px 0px #ff9c31,
      14px 30px 0px #ff9c31, 16px 30px 0px #ff9c31, 18px 30px 0px #ff9c31,
      20px 30px 0px #ff9c31, 22px 30px 0px #ff9c31, 24px 30px 0px #ff9c31,
      26px 30px 0px #ff9c31, 28px 30px 0px #ff9c31, 30px 30px 0px #ff9c31,
      32px 30px 0px #000, 2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000,
      8px 32px 0px #000, 10px 32px 0px #000, 12px 32px 0px #000,
      14px 32px 0px #000, 16px 32px 0px #000, 18px 32px 0px #000,
      20px 32px 0px #000, 22px 32px 0px #000, 24px 32px 0px #000,
      26px 32px 0px #000, 28px 32px 0px #000, 30px 32px 0px #000,
      32px 32px 0px #000;
    position: absolute;
    transform: translate(-30px);
    z-index: 3;
  }

Empfohlen

Ein Code von cleanbug411

Metehan

Beispiel für eine CSS-Fragmentanimation

HTML

CSS

JS

Empfohlen

Ein Code von cleanbug411

Metehan

Beispiel für eine CSS-Fragmentanimation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS