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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin sehr neu in CSS und ebenfalls anpassen wollte meine StreamLabs chat-so der name/Abzeichen würde animiert werden anders aus der Nachricht. Es dauerte eine Weile, um herauszufinden, vor allem, weil die Vorlage, die ich begann, benötigte die
display
Eigenschaft für#log .meta
und#log .message
zugeordnetinline-block
für Animationen zu arbeiten. In deinem Falltable-cell
unterstützt auch Animationen, so dass das nicht geändert werden müssen.In der ersten
#log>div
element entfernenfadeInRight .3s ease forwards,
sowohl die Eigenschaften der animation.In
#log .meta
(Abzeichen + Namen), die Sie wollen, um die Folie von der linken Seite, fügen Sie dieanimation
undwebkit-animation
Eigenschaften mit dem WertslideInLeft .3s ease forwards;
.Tun das gleiche für
#log .message
, außer ersetzenslideInLeft
mitslideInRight
.InformationsquelleAutor Pilot_51