# 【Discord】多人數通話頭像動畫 Overlay CSS
## 介紹
---
* ### 由Discord Overlay CSS演變而來，受到[Discordで喋ってる人を分かり易くするカスタムCSS](https://manten-do.net/archives/273)啟發但不需要逐個註冊用戶ID

---
## 效果

### 會形成一方型Icon並跳動 (來源VSPO 橘ひなの

---
## 操作
* ### 先使用[Discord Overlay](https://streamkit.discord.com/overlay)取得瀏覽器工具
* ### 進到OBS並使用瀏覽器源中的自訂CSS 貼上

/***多人CSS***/
:root {--user-icon:200px}
@keyframes wiggler {
	0% {transform:translate(0, 0)}
	50% {transform:translate(0, -.5em)}
	100% {transform:translate(0, 0)}
}
body {
	font-family: "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti, sans-serif, serif!important;
	height: 2144px;
	width: 423px;
	margin: 0;
	padding: 0;
	background-color: rgba(0,0,0,0);
	overflow: hidden
}
[class*="Voice_voiceStates__"] * {
	display: inline-block
}
[class*="Voice_voiceStates__"] {
	margin: 0;
	padding: 0;
	text-align: left;
	column-count: 2;
	column-fill: auto;
	height: 2144px
}
[class*="Voice_voiceState__"] {
	position: relative;
	margin: 10px 0 0 5px;
	text-align: left;
	list-style-type: none;
	height: var(--user-icon, 200px);
	min-width: var(--user-icon, 200px);
	max-width: var(--user-icon, 200px)
}
[class*="Voice_avatar__"] {
	height: var(--user-icon, 200px);
	width: var(--user-icon, 200px);
	margin: 0;
	border: 0 solid transparent;
	border-radius: 0;
	float: none
}
[class*="Voice_avatar__"] {
	margin: 0;
	opacity: .8;
	filter: brightness(50%);
	border-radius: 7px!important
}
[class*="Voice_avatarSpeaking__"] {
	border-color: transparent!important
}
[class*="Voice_avatarSpeaking__"] {
	opacity: 1;
	filter: brightness(100%)!important;
	animation: wiggler .5s infinite ease;
	border: 0;
	box-shadow: 0 0 10px #43b581
}
[class*="Voice_user__"] {
	line-height: 40px;
	padding-top: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	display: inline-block;
	text-align: center;
	z-index: 1;
	min-width: var(--user-icon, 200px);
	max-width: var(--user-icon, 200px);
	overflow: hidden;
	white-space: nowrap;
	font-size: 20pt!important;
	border-radius: 0 0 7px 7px!important;
}
[class*="Voice_name__"] {
	font-size: 20pt!important;
	border: 0;
	margin: 0;
	background-color: transparent!important
}

### 並得到這樣的效果

---

## 參考
* ### [Discord StreamKit Overlay Sample](https://gungeespla.github.io/obs_discord_sample/)
* ### [【Discord】通話時自動閃爍說話者的圖片](https://hackmd.io/@f6bfb5/Hk3HU8kUI#%E4%BB%8B%E7%B4%B9)

## 後言
### 如果有時間我會再做完整一點此篇純屬紀錄成果