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

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

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

/* top glitch strip */
@keyframes glitch_a {
    0%, 8% {
        clip-path: inset(0 100% 72% 0);
        opacity: 0;
    }

    12% {
        clip-path: inset(0 72% 72% 4%);
        opacity: 1;
    }

    20% {
        clip-path: inset(0 58% 72% 18%);
    }

    28% {
        clip-path: inset(0 48% 72% 30%);
        opacity: 0;
    }

    36% {
        clip-path: inset(0 38% 72% 42%);
        opacity: 1;
    }

    52% {
        clip-path: inset(0 22% 72% 58%);
    }

    70% {
        clip-path: inset(0 5% 72% 76%);
    }

    88%, 100% {
        clip-path: inset(0 0 72% 100%);
        opacity: 0;
    }
}

/* middle glitch strip */
@keyframes glitch_b {
    0%, 15% {
        clip-path: inset(34% 100% 35% 0);
        opacity: 0;
    }

    18% {
        clip-path: inset(34% 78% 35% 8%);
        opacity: 1;
    }

    30% {
        clip-path: inset(34% 60% 35% 24%);
    }

    42% {
        clip-path: inset(34% 50% 35% 38%);
        opacity: 0;
    }

    48% {
        clip-path: inset(34% 42% 35% 44%);
        opacity: 1;
    }

    62% {
        clip-path: inset(34% 25% 35% 58%);
    }

    78% {
        clip-path: inset(34% 8% 35% 74%);
    }

    95%, 100% {
        clip-path: inset(34% 0 35% 100%);
        opacity: 0;
    }
}

/* bottom glitch strip */
@keyframes glitch_c {
    0%, 5% {
        clip-path: inset(70% 100% 0 0);
        opacity: 0;
    }

    10% {
        clip-path: inset(70% 84% 0 2%);
        opacity: 1;
    }

    18% {
        clip-path: inset(70% 68% 0 16%);
        opacity: 0;
    }

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

    40% {
        clip-path: inset(70% 45% 0 36%);
    }

    56% {
        clip-path: inset(70% 30% 0 52%);
        opacity: 0;
    }

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

    82% {
        clip-path: inset(70% 4% 0 78%);
    }

    96%, 100% {
        clip-path: inset(70% 0 0 100%);
        opacity: 0;
    }
}

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

.chigusa-original {
    display: inline-block;

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

.chigusa-signature::before,
.chigusa-signature::after {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
    white-space: nowrap;


    color: #0f1d87;
    font-family: monospace;
    font-size: 1.4em;
    line-height: inherit;

    text-shadow:
        0 0 2px #0f1d87,
        1px 1px 2px #0c42a0;
}

.chigusa-signature::before {
    content: "████████████████████████████████████████████████████████████";
    animation:
        glitch_a 12s steps(24, end) 15s forwards,
        glitch_c 12s steps(24, end) 15s forwards;
}

.chigusa-signature::after {
    content: "████████████████████████████████████████████████████████████";
    animation:
        glitch_b 12s steps(24, end) 15s forwards;
}