discordのアイコンを表示し、喋っている間だけアイコンを口パクさせるGIFを表示するためのCSSを提供します。
まず、discordのアイコンと名前を表示させるために、以下のCSSコードを使用します。
“`css
.discord-icon {
display: flex;
align-items: center;
}
.discord-icon img {
width: 25px; /* アイコンのサイズに合わせて調整 */
height: 25px;
margin-right: 5px; /* アイコンと名前の間隔に合わせて調整 */
}
“`
これにより、discordのアイコンと名前を横並びで表示することができます。
次に、喋っている間だけアイコンを口パクさせるGIFを表示させるために、以下のCSSコードを使用します。
“`css
.discord-icon img {
animation: mouth-move 1s infinite; /* 口パクアニメーションの設定 */
}
@keyframes mouth-move {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(2px); /* 口パクの動きに合わせて調整 */
}
100% {
transform: translateY(0px);
}
}
“`
このコードにより、アイコンが口パクするアニメーションが付与され、喋っている間だけ口が動くようになります。
このCSSコードを適用することで、obsの配信画面にdiscordのアイコンと名前を表示し、喋っている間だけアイコンが口パクするGIFが表示されるようになります。