streamlabs custom alerts

 

Выглядит примерно вот так 


Включаем в настройка "Включить пользовательские HTML/CSS"

Продолжительность оповещения "7s"

Расположение "второе"

 

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700i" rel="stylesheet">
 <div class="test1">
<div class="test">
<div class="test-text">{name}</div>
<div class="test-text2">Новый подписчик</div>
</div>
  </div>

.test1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.test {
  background: rgba(81,78,100,.8);
  width:100%;
  animation: test 7s ease-out 1 alternate;
  margin: auto;
  transform: rotate(-3deg);
}

.test-text {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 50px ;
  color: #FFC107;
  animation: test-text 5s linear 1 forwards;
  animation-delay: .5s;
  width: 1280px;
  text-align: center;
  margin-left: -100%;
  position: absolute;
  left: -640px;
  top: 5px;

}


.test-text2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px ;
  color: white;
  animation: test-text2 5s linear 1 forwards;
  animation-delay: .5s;
  width: 1280px;
  text-align: center;
  margin-left: 200%;
  position: absolute;
  left: -640px;
  top: 60px;
  text-transform: uppercase;

}


@keyframes test {
  0% {
    height: 0px;


  }
    5% {
    height: 0px;

  }

    10% {
    height: 100px;

  }
      80% {
    height: 100px;

  }

  85% {
    
    height: 0;
  }

}

@keyframes test-text {
  0%   { margin-left: -100% }
  5%   { margin-left: 49% }
  90% {margin-left: 50% }
  100% { margin-left: 200% }
}

@keyframes test-text2 {
  0%   { margin-left: 200% }
  5%   { margin-left: 50% }
  90% {margin-left: 49% }
  100% { margin-left: -200% }
}


body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}