Drei Scrolling-Effekte für die Benachrichtigungsleiste, implementiert mit reinem CSS

Vorwort

Die Benachrichtigungsleistenkomponente ist eine relativ häufige Komponente. Im Grunde hat jede Site eine solche Komponente. Ihre Hauptfunktion besteht darin, Änderungen auf der Site anzukündigen oder Gewinner zu informieren.
Ich habe kürzlich den CSS3-Animationsteil überprüft. Ich dachte, dass die meisten Benachrichtigungsleistenkomponenten immer noch mit JS implementiert sind. Ich habe diese Komponente nur als Überprüfung genommen. Ich habe unten drei kleine Beispiele geschrieben, um sie zu teilen. Sie können sie sich gerne ansehen. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht und einen Kommentar.

Der erste

HTML-Teil

<div Klasse="Hinweis">
    <div Klasse="Hinweis__inner">
        <div Klasse="Hinweis__Box">
            <div class="notice__item">Herzlichen Glückwunsch an Mitgliedsbenutzer <span style="color: red;">Chengrenren</span> zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitgliedsbenutzer <span style="color: red;">Xiao Mi Quan Quan</span> zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitglied-Benutzer <span style="color: red;">Cooke_</span> zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitglied &nbsp;<span style="color: red;">Love Music Website</span>&nbsp; zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitglied <span style="color: red;">Voice of Youth</span> zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitgliedsbenutzer &nbsp;<span style="color: red;">Xianren</span>&nbsp; zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an den Mitgliedsbenutzer <span style="color: red;">Nummer 300.000</span>, der den Preis gewonnen hat</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitgliedsbenutzer &nbsp;<span style="color: red;">Maboroshii</span>&nbsp; zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitglied Chen Yaming zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an das Mitglied &nbsp;<span style="color: red;">Ich bin endlich reich geworden</span>&nbsp;Ich habe den Preis gewonnen</div>
        </div>
        <div Klasse="Hinweis__Box">
            <div class="notice__item">Herzlichen Glückwunsch an Mitgliedsbenutzer <span style="color: red;">Chengrenren</span> zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitgliedsbenutzer <span style="color: red;">Xiao Mi Quan Quan</span> zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitglied-Benutzer <span style="color: red;">Cooke_</span> zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitglied &nbsp;<span style="color: red;">Love Music Website</span>&nbsp; zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitglied <span style="color: red;">Voice of Youth</span> zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitgliedsbenutzer &nbsp;<span style="color: red;">Xianren</span>&nbsp; zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an den Mitgliedsbenutzer <span style="color: red;">Nummer 300.000</span>, der den Preis gewonnen hat</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitgliedsbenutzer &nbsp;<span style="color: red;">Maboroshii</span>&nbsp; zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an Mitglied Chen Yaming zum Gewinn des Preises</div>
            <div class="notice__item">Herzlichen Glückwunsch an das Mitglied &nbsp;<span style="color: red;">Ich bin endlich reich geworden</span>&nbsp;Ich habe den Preis gewonnen</div>
        </div>
    </div>
</div>

CSS-Teil

.beachten{
    Breite: 300px;
    Höhe: 300px;
    Rahmenradius: 8px;
    Rand: 1px durchgezogen #eee;
    Rand: 100px automatisch;
}
.notice__inner{
    Breite: 100 %;
    Höhe: 100%;
    Überlauf: versteckt;
    Schriftgröße: 14px;
    Farbe: #666;
}
.notice__box{
    Animation: Rolle 10 s linear unendlich;
}
.notice__item{
    Breite: 100 %;
    Höhe: 30px;
    Zeilenhöhe: 30px;
    Polsterung: 0 12px;
    Leerzeichen: Nowrap;
}
@keyframes rollen {
    0% {
        transformieren: übersetzenY(0);
    }
    100 % {
        transformieren: übersetzenY(-300px);
    }
}

Die Höhe des Ansichtsfenster-Containers muss festgelegt werden. Wenn der Inhalt den Ansichtsfenster-Container überschreitet, wird er ausgeblendet.
Um ein nahtloses Zurückscrollen zu ermöglichen, muss der Inhalt in zwei Kopien direkt hintereinander bereitgestellt werden.
Der Scroll-Effekt wird durch das Verschieben der inneren Ebene „translateY“ erzielt.
Wenn der erste Inhalt vollständig aus dem Ansichtsfenster-Container herausgescrollt ist, stellen Sie die Inhaltsposition sofort wieder her.
Dieser Vorgang wird unendlich wiederholt.

Der Zweite

HTML-Teil

<div Klasse="Hinweis">
    <div Klasse="Hinweis__inner">
        <div class="notice__item">Der gesamte Prozess des HTTP-Upgrades auf HTTPS, reibungsloses Upgrade der Nginx-Konfiguration</div>
        <div class="notice__item">Auf einem Computer gibt es mehrere Versionen von Vuecli, was praktisch ist, um verschiedene Versionen von Vue-Projekten schnell zu initialisieren</div>
        <div class="notice__item">Front-End-Modulspezifikationsdefinition – Import und Export unter verschiedenen Spezifikationen</div>
        <div class="notice__item">Erklären Sie schnell und präzise die Rolle des v-for-Schleifenschlüssels in Vue</div>
        <div class="notice__item">Analyse und handschriftliche Implementierung von Call- und Apply-Funktionen</div>
        <div class="notice__item">Ein Jahr als gewöhnlicher Bildschneider | Jährliche Aufforderung zur Abgabe eines Essays bei Nuggets</div>
        <div class="notice__item">Browser-Cache (also HTTP-Cache), den das Front-End kennen muss | 🏆 Call for Papers zum achten Fachthema</div>
    </div>
</div>

CSS-Teil

.beachten{
    Breite: 600px;
    Höhe: 40px;
    Rahmenradius: 8px;
    Rand: 1px durchgezogen #eee;
    Rand: 100px automatisch;
    Überlauf: versteckt;
}
.notice__inner{
    Animation: Rolle 36 s linear unendlich;
    Rand oben: 0
}
.notice__item{
    Schriftgröße: 14px;
    Höhe: 40px;
    Zeilenhöhe: 40px;
    Polsterung: 0 12px;
    Leerzeichen: Nowrap;
    Textdekoration: Unterstreichen;
}
@keyframes rollen {
    0% {
        Rand oben: 0;
    }
    4% {
        Rand oben: 0;
    }
    8% {
        Rand oben: 0;
    }
    12% {
        Rand oben: -40px;
    }
    16% {
        Rand oben: -40px;
    }
    20% {
        Rand oben: -80px;
    }
    vierundzwanzig% {
        Rand oben: -80px;
    }
    28 % {
        Rand oben: -120px;
    }
    32 % {
        Rand oben: -120px;
    }
    36 % {
        Rand oben: -160px;
    }
    40 % {
        Rand oben: -160px;
    }
    44 %
        Rand oben: -200px;
    }
    48 % {
        Rand oben: -200px;
    }
    52 % {
        Rand oben: -240px;
    }
    56 % {
        Rand oben: -240px;
    }
    60 % {
        Rand oben: -200px;
    }
    64 % {
        Rand oben: -200px;
    }
    68 %
        Rand oben: -160px;
    }
    72 % {
        Rand oben: -160px;
    }
    76 % {
        Rand oben: -120px;
    }
    80 % {
        Rand oben: -120px;
    }
    84 % {
        Rand oben: -80px;
    }
    88 % {
        Rand oben: -80px;
    }
    92 % {
        Rand oben: -40px;
    }
    96 % {
        Rand oben: -40px;
    }
    100 % {
        Rand oben: 0;
    }
}

(Die GIF-Aufnahme ist möglicherweise etwas kurz. Es wird empfohlen, es selbst auszuprobieren.)

Diese Art von Karussell ist weit verbreitet und zudem relativ praktisch, vollständig und einfach. Nur um es zu erwähnen: Es ist relativ einfach und schnell, es mit der Swiper-Komponente des WeChat-Applets zu implementieren (fragen Sie mich nicht, woher ich das weiß -.-).

Die Höhe des Ansichtsfenster-Containers muss festgelegt werden. Wenn der Inhalt den Ansichtsfenster-Container überschreitet, wird er ausgeblendet.
Erzielen Sie einen Bildlaufeffekt, indem Sie den oberen inneren Rand verschieben (dasselbe gilt für translateY, ersetzen Sie einfach alle).
Beachten Sie, dass wir aus dem obigen HTML wissen, dass ich sieben Benachrichtigungen habe, sodass sich der obere Rand in @keyframes nur sieben Mal bewegt und dann zurückgeht. Wenn eine achte Benachrichtigung hinzugefügt wird, müssen wir den Wert entsprechend anpassen.

Der dritte

HTML-Teil

<div Klasse="Hinweis">
    <div Klasse="Hinweis__inner">
        <span class="notice__item notice__item-first">Vue ist ein progressives JavaScript-Framework</span>
        <span class="notice__item notice__item-second">Vue ist ein progressives JavaScript-Framework</span>
    </div>
</div>

CSS-Teil

.beachten{
    Breite: 600px;
    Höhe: 40px;
    Rahmenradius: 8px;
    Rand: 1px durchgezogen #eee;
    Rand: 100px automatisch;
    Überlauf: versteckt;
}
.notice__inner{
    Höhe: 100%;
    Schriftgröße: 14px;
    Farbe: #333;
    Zeilenhöhe: 40px;
    Leerzeichen: Nowrap;
    Position: relativ;
}
.notice__item{
    Position: absolut;
    oben: 0;
    links: 100 %;
    Höhe: 100%;
}
.notice__item-first{
    Polsterung rechts: 70 %;
    Animation: Rolle. Erste 25 s, linear, unendlich;
}
.notice__item-second{
    Polsterung rechts: 53 %;
    Animation: RollSekunde 25s linear 12s unendlich;
}
@keyframes rollFirst {
    0% {
        transformieren: übersetzenX(0);
    }
    100 % {
        transformieren: übersetzenX(-200%);
    }
}
@keyframes rollSecond {
    0% {
        transformieren: übersetzenX(0);
    }
    100 % {
        transformieren: übersetzenX(-200%);
    }
}

Diese Art von scrollender Benachrichtigungsleiste ist ebenfalls weit verbreitet. Einer der problematischsten Punkte ist, dass das Leerintervall schwer zu steuern ist, insbesondere wenn mehrere Benachrichtigungsinhalte vorhanden sind. Natürlich ist die Implementierung mit JS einfacher, und jetzt gibt es auch viele Plug-Ins, die direkt sofort verwendet werden können.

Die Höhe dieses Ansichtsfenstercontainers muss nicht festgelegt werden und ist nicht davon abhängig. Der Inhalt wird jenseits des Ansichtsfenstercontainers verborgen.
Verwenden Sie „padding-right“, um einen Leerraum in Prozent zu erstellen.
Es müssen zwei Kopien des Inhalts vorbereitet werden, und die Animationsverzögerung wird verwendet, um das Erscheinen der zweiten Kopie des Inhalts zu verzögern. Eine andere Idee besteht darin, das TranslateX des inneren Containers, das mit dem ersten identisch ist, direkt zu verschieben.

Zusammenfassung

Möchten Sie es nach der Lektüre unbedingt ausprobieren? NEIN? Okay.

Reines HTML+CSS ist definitiv nicht so flexibel wie JS, aber die obigen Beispiele eignen sich dennoch sehr gut für einige Szenarien mit festem Copywriting und eignen sich auch, um während der Entwicklungsphase schnell interaktive Effekte zu erzielen.

Damit ist dieser Artikel über drei mit reinem CSS implementierte Scrolleffekte für Benachrichtigungsleisten abgeschlossen. Weitere relevante CSS-Inhalte für Benachrichtigungsleisten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: MySQL-Dienst und Datenbankverwaltung

>>: Allgemeine Vorgänge des Web-Frontends (einschließlich JS/HTML/CSS und anderer Wissensaspekte)

So verkleinern Sie das Stammverzeichnis des XFS-Partitionsformats in Linux

Drei Scrolling-Effekte für die Benachrichtigungsleiste, implementiert mit reinem CSS

Vorwort

Der erste

Der Zweite

Der dritte

Zusammenfassung

So verkleinern Sie das Stammverzeichnis des XFS-Partitionsformats in Linux

Detaillierte Erklärung, wie Tomcat asynchrone Servlets implementiert

Implementierung eines MySQL-Gemeinschaftsindex (zusammengesetzter Index)

JavaScript implementiert die asynchrone Übermittlung von Formulardaten

Unterschiede zwischen FLOW CHART und UI FLOW

Teilen Sie 13 hervorragende Web-Wireframe-Design- und Produktionstools

Detaillierter Prozess zum Erstellen eines NFS-Servers mithilfe des NFS-Ganesha-Image von Docker

Detaillierte Erklärung des Unterschieds zwischen dem JavaScript-Spread-Operator und dem Rest-Operator

Spezifische Methode zum Löschen des MySQL-Dienstes

Verwenden Sie die Vue3+Vant-Komponente, um die Suchverlaufsfunktion der App zu implementieren (Beispielcode).

Artikel empfehlen

Implementierung der Wiederaufnahme des K8S-Knotens in den Master-Cluster

Implementierung eines einfachen Chatroom-Dialogs basierend auf WebSocket

Installieren und Konfigurieren von MySQL unter Linux

Detaillierte Erklärung, wie Nginx das Problem des domänenübergreifenden Zugriffs auf Front-End-Ressourcen löst

So deinstallieren Sie MySQL 5.7 unter CentOS7

So zeigen Sie im img-Tag in HTML nur die Bildmitte an (drei Methoden)

Zusammenfassung des Wissens zum MySQL-Protokoll

WeChat Mini-Programm: Position des Videofeuers zufällig

Docker-Befehle werden so implementiert, dass normale Benutzer sie ausführen können

Detaillierte Erläuterung der Galera-Cluster-Bereitstellung im Clustermodus von MySQL

Praktischer grundlegender Beispielcode für den Linux-Befehl sed

So erstellen Sie einen Tabellenindex in MySQL

Beispiele für die Verwendung von ungeordneten Listen-Tags und geordneten Listen-Tags im HTML-Format

Beispielcode zur Implementierung eines 3D-Rotationseffekts mit reinem CSS

Beim Website-Design sollte auf die Farbhierarchie geachtet werden