Streamlabs benutzerdefinierte CSS twitch chat animieren, Namen und Nachricht separat

Möchte ich gestalte mein twitch-chat-overlay aus Streamlabs so, dass der Benutzername der person, animiert von der linken Seite, während die eigentliche Botschaft, die Sie senden, animiert von rechts. Unten habe ich eingefügt das CSS, das ist alles was ich brauche als Stream-labs macht den rest. Das wichtigste bit, das steuert die animation beginnt der text auf der 19ten Zeile mit #log>div{
Auch, sorry für den langen code, aber Sie müssen es alle.

h@import url(https://fonts.googleapis.com/css?family=Roboto:700);
* {
    box-sizing: border-box;
}

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

body {
    text-shadow: 0 0 1px #000, 0 0 2px #000;
    background: $background_color;
    font-family: 'Roboto';
    font-weight: 700;
    font-size: $font_size;
    line-height: 1.5em;
    color: $text_color;
}

#log>div {
    animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delay forwards;
-webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delay forwards;
}

.colon {
    display: none;
}

#log {
    display: table;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 10px 10px;
    width: 100%;
    table-layout: fixed;
}

#log>div {
    display: table-row;
}

#log>div.deleted {
    visibility: hidden;
}

#log .emote {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 0.4em 0.2em;
    position: relative;
}

#log .emote img {
    display: inline-block;
    height: 1em;
    opacity: 0;
}

#log .message,#log .meta {
    vertical-align: top;
    display: table-cell;
    padding-bottom: 0.1em;
}

#log .meta {
    width: 35%;
    text-align: right;
    padding-right: 0.5em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#log .message {
    word-wrap: break-word;
    width: 65%;
}

.badge {
    display: inline-block;
    margin-right: 0.2em;
    position: relative;
    height: 1em;
    vertical-align: middle;
    top: -0.1em;
}

.name {
    margin-left: 0.2em;
}

InformationsquelleAutor Alphex | 2017-02-15

Schreibe einen Kommentar