So erstellen Sie mit CSS einen nahtlosen Effekt für die Benachrichtigungsleiste mit Lauftext

So verwenden Sie CSS, um einen nahtlosen Lauftext-Benachrichtigungsleisteneffekt zu erstellen

Die nahtlose Lauftext-Benachrichtigungsleiste ist ein häufiger Effekt auf Webseiten und kann durch CSS erreicht werden. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS eine nahtlose Lauftext-Benachrichtigungsleiste erstellen, und es werden spezifische Codebeispiele bereitgestellt.

Um einen nahtlosen Lauftext-Benachrichtigungsleisteneffekt zu erzielen, benötigen Sie zunächst einen Container, um den Text umzubrechen, und legen Sie die Breite, Höhe und Hintergrundfarbe des Containers fest. Wir können zum Beispiel ein div-Element verwenden und ihm einen Klassennamen wie diesen geben:

<div class="scrolling-text-container">
    文字通知栏内容
</div>

Als nächstes müssen wir CSS-Stile definieren, um das Aussehen und Verhalten der Textbenachrichtigungsleiste zu steuern. Zuerst fügen wir dem Container einige grundlegende Stile hinzu, wie unten gezeigt:

.scrolling-text-container {
    width: 100%;
    height: 30px;
    background-color: #f1f1f1;
    overflow: hidden;
    white-space: nowrap;
}

Der obige Code stellt die Breite des Containers auf 100 %, die Höhe auf 30 Pixel und die Hintergrundfarbe auf Grau ein. Gleichzeitig setzen wir das Überlaufattribut auf „versteckt“, um den Inhalt außerhalb der Textbenachrichtigungsleiste auszublenden und sicherzustellen, dass nur der sichtbare Teil des Containers angezeigt wird.

Als nächstes müssen wir den Inhalt der Textbenachrichtigungsleiste in ein Span-Element einschließen und die Schlüsselstilattribute dafür festlegen, wie unten gezeigt:

<div class="scrolling-text-container">
    <span class="scrolling-text">文字通知栏内容</span>
</div>

.scrolling-text {
    position: relative;
    display: inline-block;
    animation: scroll-left 10s linear infinite;
}

Im obigen Code legen wir einen Klassennamen für das Span-Element fest. und definiert die notwendigen Stilattribute. Unter anderem setzen wir das Positionsattribut auf „relativ“, um die relative Positionierung während der Scroll-Animation beizubehalten. Außerdem setzen wir die Anzeigeeigenschaft auf „inline-block“, damit das Span-Element in einer Zeile angezeigt wird und verhindert, dass sich die Containerbreite ändert.

Wir haben außerdem eine Animation namens „nach links scrollen“ definiert, die den Text schrittweise von rechts nach links scrollen lässt. Diese Animation verwendet lineare Animationseffekte und legt eine Dauer von 10 Sekunden fest. Um eine Endlosschleife zu erreichen, setzen wir die Eigenschaft „animation-iteration-count“ auf „infinite“. Der spezifische Animationscode lautet wie folgt:

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

Die @keyframes-Regel im obigen Code definiert zwei Schlüsselbilder der Scroll-Links-Animation. Bei 0 % setzen wir die Position des Textes auf die Originalposition, also ohne Versatz. Bei 100 % versetzen wir die Position des Textes um 100 % nach links, sodass er links vom Container vollständig verschwindet und von rechts wieder auftaucht.

Schließlich müssen wir der Textbenachrichtigungsleiste einige zusätzliche Stile hinzufügen, um sie besser an das Design und Layout der Webseite anzupassen. Sie können es an Ihre Bedürfnisse anpassen. Sie können beispielsweise die Farbe, Schriftart, Größe usw. des Texts sowie die Ränder, Abstände usw. des Texts festlegen. Das Folgende ist ein Beispiel-Codeausschnitt zum Anpassen des Stils der Textbenachrichtigungsleiste:

.scrolling-text {
    ...
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 5px;
    margin: 0;
    letter-spacing: 1px;
}

Der obige Codeausschnitt setzt die Schriftfarbe für die Textbenachrichtigungsleiste auf Schwarz, die Schriftfamilie auf Arial und die Ersatzschriftart auf Sans-Serif. und die Schriftgröße auf 16 Pixel, der Rand auf 5 Pixel und der Abstand auf 1 Pixel.

Mit den oben genannten HTML- und CSS-Codebeispielen können Sie ganz einfach einen nahtlosen Lauftext-Benachrichtigungsleisteneffekt erzielen. Gestalten Sie einfach den passenden Stil entsprechend Ihren Bedürfnissen. Auf diese Weise können Sie mithilfe von CSS eine dynamische und attraktive Textbenachrichtigungsleiste in Ihre Webseite implementieren, um die Aufmerksamkeit der Benutzer zu erregen und sie mit wichtigen Informationen zu versorgen.

Ich hoffe, dieser Artikel kann Ihnen helfen, die Wirkung von CSS bei der Erstellung einer nahtlosen Lauftext-Benachrichtigungsleiste zu verstehen. Ich wünschte, Sie könnten CSS verwenden, um eine wunderbare Textbenachrichtigungsleiste zu erstellen!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS einen nahtlosen Effekt für die Benachrichtigungsleiste mit Lauftext. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!