用户:一只蓝莓π/签名/style.css

@keyframes chigusa_text_hide {
    0% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}


/* upper corruption */
@keyframes chigusa_glitch_top {
    0% {
        clip-path: inset(0 100% 52% 0);
        opacity: 0.7;
    }

    5% {
        clip-path: inset(0 82% 52% 0);
        opacity: 1;
    }

    15% {
        clip-path: inset(0 72% 52% 8%);
        opacity: 1;
    }

    25% {
        clip-path: inset(0 62% 52% 18%);
        opacity: 0.7;
    }

    32% {
        clip-path: inset(0 55% 52% 24%);
        opacity: 1;
    }

    45% {
        clip-path: inset(0 43% 52% 36%);
        opacity: 1;
    }

    55% {
        clip-path: inset(0 34% 52% 48%);
        opacity: 0.7;
    }

    63% {
        clip-path: inset(0 27% 52% 55%);
        opacity: 1;
    }

    78% {
        clip-path: inset(0 12% 52% 70%);
        opacity: 1;
    }

    90% {
        clip-path: inset(0 2% 52% 87%);
        opacity: 1;
    }

    100% {
        clip-path: inset(0 0 52% 100%);
        opacity:0.7;
    }
}


/* lower corruption */
@keyframes chigusa_glitch_bottom {
    0% {
        clip-path: inset(48% 100% 0 0);
        opacity: 0.7;
    }

    8% {
        clip-path: inset(48% 88% 0 2%);
        opacity: 1;
    }

    18% {
        clip-path: inset(48% 76% 0 12%);
        opacity: 0.7;
    }

    24% {
        clip-path: inset(48% 68% 0 17%);
        opacity: 1;
    }

    38% {
        clip-path: inset(48% 55% 0 30%);
        opacity: 1;
    }

    50% {
        clip-path: inset(48% 45% 0 41%);
        opacity: 0.7;
    }

    57% {
        clip-path: inset(48% 37% 0 49%);
        opacity: 1;
    }

    70% {
        clip-path: inset(48% 24% 0 62%);
        opacity: 1;
    }

    84% {
        clip-path: inset(48% 10% 0 76%);
        opacity: 0.7;
    }

    89% {
        clip-path: inset(48% 5% 0 83%);
        opacity: 1;
    }

    100% {
        clip-path: inset(48% 0 0 100%);
        opacity: 0.7;
    }
}


.chigusa-signature {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: -0.12em;
}


.chigusa-original {
    display: inline-block;

    animation:
        chigusa_text_hide
        12s
        steps(24, end)
        15s
        forwards;
}


/* IMPORTANT:
   hide both glitch layers BEFORE the 15-second delay ends
*/
.chigusa-signature::before,
.chigusa-signature::after {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
    white-space: nowrap;


    color: #1500ff;

    font-family: monospace;
    font-size: 1.4em;
    line-height: inherit;

    text-shadow:
        0 0 2px #1500ff,
        1px 1px 2px #1500ff;

    /* THIS fixes them appearing immediately */
    opacity: 0;
}


.chigusa-signature::before {
	z-index: 1;
    content: "████████████████████████████████████████████████████████████████";

    clip-path: inset(0 100% 52% 0);

    animation:
        chigusa_glitch_top
        12s
        steps(24, end)
        15s
        forwards;
}


.chigusa-signature::after {
    content: "████████████████████████████████████████████████████████████████";

    clip-path: inset(48% 100% 0 0);

    animation:
        chigusa_glitch_bottom
        12s
        steps(24, end)
        15s
        forwards;
}