|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
| :root {
| |
| --glitch-text-offset: 3px;
| |
| --glitch-text-offset--neg: -3px;
| |
| --glitch-text-color-1: cyan;
| |
| --glitch-text-color-2: fuchsia;
| |
| }
| |
|
| |
| .glitch-text {
| |
| text-shadow: var(--glitch-text-offset) var(--glitch-text-offset--neg) 0 var(--glitch-text-color-1), var(--glitch-text-offset--neg) var(--glitch-text-offset) 0 var(--glitch-text-color-2);
| |
| animation: glitch-text 250ms linear infinite;
| |
| }
| |
|
| |
| @keyframes glitch-text {
| |
| 0% {
| |
| --glitch-text-offset: -3px;
| |
| --glitch-text-offset--neg: 3px;
| |
| }
| |
|
| |
| 25% {
| |
| --glitch-text-offset: 3px;
| |
| --glitch-text-offset--neg: -3px;
| |
| }
| |
|
| |
| 50% {
| |
| --glitch-text-offset: -3px;
| |
| --glitch-text-offset--neg: -3px;
| |
| }
| |
|
| |
| 75% {
| |
| --glitch-text-offset: 3px;
| |
| --glitch-text-offset--neg: 3px;
| |
| }
| |
|
| |
| 100% {
| |
| --glitch-text-offset: 0;
| |
| --glitch-text-offset--neg: 0;
| |
| }
| |
| }
| |
|
| |
| @media (prefers-reduced-motion) {
| |
| .glitch-text { animation: none; }
| |
| }
| |
/* CSS placed here will be applied to all skins */
