グリッチUserCSS ver.1.0
https://gyazo.com/9b485e516972a086508b6c0afe631d39
使い方
1. プロジェクトのSettingsページにstyle.cssのコードブロックを作り、上の方に以下のコードを置く code:sample.css
@import "/api/code/Mijinko/グリッチUserCSS_ver.1.0/style.css";
2. ページ内で[# テキスト]の形で記述する
Tips
このCSSは作業地獄から脱走したMijinko_SD.iconが制作したものです。
ダークテーマだと映えます。
ライトテーマ使ってる奴は地獄に堕ちろ。
記法内にリンクが含まれることは想定しておりません。
リンクじゃないテキストで試してください。
これによって下がったユーザー満足度は、その場のノリとテンションと腕力で補ってください。
コード
code:style.css
.line:not(.cursor-line) .deco-\# {
animation-name: glitch;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.line:not(.cursor-line) .deco-\# .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;
}
/* 文字ぐらつき1 */
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;
}
/* 文字ぐらつき2+緑 */
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;
}
/* 文字ぐらつき3+赤緑 */
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);
}
}