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

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)

Artikel empfehlen

Implementierung der automatischen Konstruktionsweiterleitung von React

Inhaltsverzeichnis Sequenz 1. Zentralisiertes Rou...

Detaillierte Erklärung zur SQL-Injection - Sicherheit (Teil 2)

Sollte dieser Artikel Fehler enthalten oder du An...

Verwenden Sie einige Interviewfragen, um den Ausführungsmechanismus von JavaScript zu untersuchen

Inhaltsverzeichnis Vorherige Wörter Synchron und ...

Erläuterung der Truncate Table-Verwendung

TRUNCATE-TABELLE Löscht alle Zeilen in einer Tabe...

Lösung für das CSS-Höhenkollapsproblem

1. Hoher Einsturzgrad Im Dokumentfluss wird die H...

Webdesign: Implementierungstechniken für Webmusik

<br />Wenn Sie Musik in eine Webseite einfüg...

Vue3.0 implementiert die Kapselung von Kontrollkästchenkomponenten

In diesem Artikelbeispiel wird der spezifische Co...

Skriptbeispiel zum Starten und Stoppen von Spring-Boot-Projekten in Linux

Es gibt drei Möglichkeiten, ein Springboot-Projek...

Eine schnelle Lösung für den ersten Anmeldefehler in mysql5.7.20

Zunächst stellen wir vor, wie (1) MySQL 5.7 hat e...

CSS- und HTML- und Front-End-Technologie-Schichtendiagramm

Front-End-Technologieschicht (Das Bild ist etwas e...

Tutorial zur Installation der dekomprimierten Version von MySQL 5.7.18 unter Windows

1. Installationsprozess MySQL-Version: 5.7.18 1. ...

HTML-Grundlagen-Zusammenfassungsempfehlung (Titel)

HTML: Titel Überschriften werden durch Tags wie &...

MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Docker

Docker installiert MySQL Version 8.0.20 zu Ihrer ...

Designtheorie: Zehn Tipps zur Inhaltspräsentation

<br /> Der Entwurf einer persönlichen Schrei...

Lösung zum Vergessen des Root-Passworts von MySQL5.7 unter Windows 8.1

【Hintergrund】 Mir ist beim Lernen kürzlich etwas ...