Весёлое испытание для участников голосовых каналов в Discord, которое можно вывести в качестве оверлея на экран трансляции.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin:0; | |
padding:0; | |
} | |
html, body, div#app-mount, div#app-mount>div, .voice-container, .voice-container .voice-states, .voice-container .voice-states .voice-state { | |
display: block !important; | |
position: absolute!important; | |
top:0;bottom:0;left:0;right:0; | |
/* Размеры исходного изображения */ | |
width: 800px!important; | |
height: 266px!important; | |
} | |
body { | |
background-image: url('https://cdn.discordapp.com/attachments/751787078085246976/988110792387870720/lab-15x5.png'); | |
background-size: auto; | |
background-repeat: no-repeat; | |
background-attachment: fixed; | |
} | |
.voice-container .voice-states { | |
padding: 0; | |
} | |
.voice-container .voice-states .voice-state { | |
margin: 0; | |
box-sizing: border-box; | |
transform-origin: 50% 50%; | |
transform: translate(0,0); | |
} | |
.voice-container .voice-states .voice-state .avatar { | |
float: none; | |
offset-rotate: 0deg; | |
animation-name: moving; | |
animation-play-state: paused; | |
/* Сколько надо говорить секунд */ | |
animation-duration: 60s; | |
/********************************/ | |
animation-direction: alternate; | |
animation-timing-function: linear; | |
animation-iteration-count: infinite; | |
animation-fill-mode: both; | |
/* Путь до выхода */ | |
/* Остановки задаются в виде координат X Y через пробел */ | |
offset-path: path("M 53 69 166 69 166 165 102 165 102 101 133 101 133 141 133 101 102 101 102 165 166 165 166 69 70 69 70 197 196 197 196 69 229 69 229 165 259 165 259 69 259 165 229 165 229 69 196 69 196 197 482 197 482 133 451 133 451 165 326 165 326 101 482 101 326 101 326 165 451 165 451 133 482 133 482 197 293 197 293 69 514 69 514 197 600 197"); | |
} | |
.voice-container .voice-states .voice-state .user { display:none; } | |
.voice-container .voice-states .voice-state .avatar.speaking { | |
animation-play-state: running; | |
} | |
@keyframes moving { | |
from { | |
offset-distance: 0%; | |
} | |
to { | |
offset-distance: 100%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment