グリッチUserCSS
from /Mijinko/グリッチUserCSS ver.1.0
白黒記法と被らないよう!#にしてみた
+#にする
abcあいうtakker.icon
グリッチがかっこいいので入れたかったtakker.icon
リンクの色も変えたい
ﾈｺと和解せよ記法とのバッティングを解消しましたbsahd.icon
code:style.css
.line:not(.cursor-line) .deco-\+.deco-\# {
/* 白黒記法を無効化する */
&:not(.hover):has(img) { filter: none; }
animation-name: glitch;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
.char-index {
animation-name: glitch-text;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
}
@keyframes glitch {
/* 初期化 */
0% {
color: inherit;
}
/* 2回連続赤青点滅 */
20% {
color: inherit;
}
21% {
color: red;
}
22% {
color: inherit;
}
24% {
position: inherit;
top: 0px;
right: 0px;
color: inherit;
}
25% {
position: relative;
top: 2px;
right: 0px;
color: blue;
}
26% {
position: inherit;
top: 0px;
right: 0px;
color: inherit;
}
/* 赤 -> 青 */
32.9% {
color: white;
}
33% {
color: red;
}
35% {
color: red;
}
36.5% {
color: blue;
}
46% {
color: blue;
}
47% {
color: inherit;
}
/* 文字ぐらつき１ */
39.9% {
position: inherit;
top: 0px;
right: 0px;
}
40% {
position: relative;
top: 4px;
right: 0px;
}
47.9% {
position: relative;
top: 4px;
right: 0px;
}
48% {
position: relative;
/* 若干下に固定する */
top: 2px;
right: 0px;
}
/* 文字ぐらつき２＋緑 */
48.9% {
position: relative;
top: 2px;
right: 0px;
color: inherit;
}
49% {
position: relative;
top: -3px;
right: -4px;
color: green;
}
51.9% {
position: relative;
top: -3px;
right: -4px;
color: green;
}
52% {
position: inherit;
top: 4px;
right: 0px;
color: inherit;
}
53.9% {
position: inherit;
top: 4px;
right: 0px;
color: inherit;
}
54% {
position: relative;
top: -3px;
right: -4px;
color: green;
}
54.9% {
position: relative;
top: -3px;
right: -4px;
color: green;
}
55% {
position: relative;
/* 若干下に固定する */
top: 2px;
right: 0px;
color: inherit;
}
/* 初期化 */
82.9% {
position: relative;
top: 2px;
right: 0px;
color: inherit;
}
83% {
position: inherit;
top: 0px;
right: 0px;
color: inherit;
}
/* 文字ぐらつき３＋赤緑 */
92% {
color: inherit;
}
93.9% {
position: relative;
top: 0px;
right: 0px;
}
94% {
position: relative;
top: -3px;
right: -4px;
color: red;
}
95.9% {
position: relative;
color: red;
}
96% {
position: relative;
top: -3px;
right: -4px;
color: green;
}
97% {
position: relative;
top: 2px;
right: 3px;
}
99% {
color: inherit;
}
}
@keyframes glitch-text {
/* 文字反転 */
32.9% {
display: inherit;
transform: scale(1, 1);
}
33% {
display: inline-block;
transform: scale(-1, 1);
}
53.9% {
display: inline-block;
transform: scale(-1, 1);
}
54% {
display: inherit;
transform: scale(1, 1);
}
}