立ち絵：単一・明滅・アニメーション

https://scrapbox.io/files/639452f6971848001d1e5537.mov

OBSの設定

table:obsの設定

ソースの種類 ブラウザ

URL Discord Streamkit OverlayのURL

よこ 画像の横幅＋50px

たて 画像の縦幅＋動きの大きさ

code:css

/** 上から数えてn番目だけ表示する */

.Voice_voiceState__OCoZh:not(:nth-child(n)) {

display: none !important;

}

:root {

/** 画像のよこ幅 */

--image-width: 600px;

/** 画像のたて幅 */

--image-height: 600px;

/** 立ち絵の画像 */

--image-url: url(【画像のURL】);

/** 動きの大きさ */

--move-distance: 10px;

/** アニメーション時間 */

--anime-duration: 6000ms;

/** 喋っていないときの暗さ */

--not-speak-brightness: brightness(60%);

/** 喋っているときの明るさ */

--speak-brightness: brightness(100%);

}

.Voice_avatar__htiqH {

content:var(--image-url);

width: var(--image-width) !important;

height: var(--image-height) !important;;

margin-top: var(--move-distance) !important;

border: none !important;

border-radius:0% !important;

filter: var(--not-speak-brightness);

}

.Voice_name__TALd9 {

display: none !important;

}

.Voice_avatarSpeaking__lE\+4m {

position:relative;

border: none !important;

animation-name: speak-now;

animation-duration: var(--anime-duration);

animation-fill-mode:forwards;

filter: var(--speak-brightness);

}

@keyframes speak-now {

0% { bottom:0px; }

5% { bottom: var(--move-distance); }

10% { bottom:0px; }

15% { bottom: var(--move-distance); }

20% { bottom:0px; }

25% { bottom: var(--move-distance); }

30% { bottom:0px; }

35% { bottom: var(--move-distance); }

40% { bottom:0px; }

45% { bottom: var(--move-distance); }

50% { bottom:0px; }

55% { bottom: var(--move-distance); }

60% { bottom:0px; }

65% { bottom: var(--move-distance); }

70% { bottom:0px; }

75% { bottom: var(--move-distance); }

80% { bottom:0px; }

85% { bottom: var(--move-distance); }

90% { bottom:0px; }

95% { bottom: var(--move-distance); }

100% { bottom:0px; }

}