ATOLS/style.css

/* for [[ATOLS]] & [[心 奇迹]] */
/*GLITCH TEXT*/

.glitch {
    color: #000;
    text-align: left;
    position: relative;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: transparent;
    color: #000;
    clip: rect(0, 900px, 0, 0);
    white-space: nowrap;
}

.glitch::before {
    left: 7px;
    text-shadow: 1px 0 green;
    animation: glitch-effect 3s infinite linear alternate-reverse;
}

.glitch::after {
    left: 3px;
    text-shadow: -1px 0 red;
    animation: glitch-effect 2s infinite linear alternate-reverse;
}

@keyframes glitch-effect {
    0% {
        clip: rect(13px, 9999px, 99px, 0);
    }
    5% {
        clip: rect(84px, 9999px, 37px, 0);
    }
    10% {
        clip: rect(99px, 9999px, 98px, 0);
    }
    15% {
        clip: rect(69px, 9999px, 56px, 0);
    }
    20% {
        clip: rect(48px, 9999px, 85px, 0);
    }
    25% {
        clip: rect(37px, 9999px, 64px, 0);
    }
    30% {
        clip: rect(8px, 9999px, 29px, 0);
    }
    35% {
        clip: rect(69px, 9999px, 20px, 0);
    }
    40% {
        clip: rect(92px, 9999px, 4px, 0);
    }
    45% {
        clip: rect(16px, 9999px, 93px, 0);
    }
    50% {
        clip: rect(98px, 9999px, 79px, 0);
    }
    55% {
        clip: rect(12px, 9999px, 41px, 0);
    }
    60% {
        clip: rect(83px, 9999px, 49px, 0);
    }
    65% {
        clip: rect(90px, 9999px, 75px, 0);
    }
    70% {
        clip: rect(16px, 9999px, 92px, 0);
    }
    75% {
        clip: rect(38px, 9999px, 75px, 0);
    }
    80% {
        clip: rect(56px, 9999px, 75px, 0);
    }
    85% {
        clip: rect(87px, 9999px, 96px, 0);
    }
    90% {
        clip: rect(79px, 9999px, 87px, 0);
    }
    95% {
        clip: rect(11px, 9999px, 27px, 0);
    }
    100% {
        clip: rect(72px, 9999px, 7px, 0);
    }
}
/*  [[Category:在主命名空间下的CSS页面]]  */