Eine allgemeine Methode zur Implementierung eines unendlichen Textkarussells mit nativem CSS
|
Textkarussells sind in unserem täglichen Leben weit verbreitet. Normalerweise gibt es Werbetafeln mit Textkarussells an den Türen von Supermärkten und Ladengeschäften. Dieser Artikel stellt die Implementierungslogik im Detail vor. SzenarioWerbetafeln an Ladentüren müssen Ankündigungen durch horizontal bewegten Text anzeigen (zur besseren Darstellung werden Ränder hinzugefügt).
Logische Beschreibung
Es gibt zwei Hauptlogiken zum Erreichen einer unendlichen Textrotation:
Die erste Implementierungsmethode besteht darin, eine CSS-Animation zu verwenden: transform: translateX(-50%), was bedeutet, dass die Hälfte von sich selbst nach links verschoben wird. Die Umsetzungsmethode von Punkt 2 bezieht sich auf Punkt 1. Standardmäßig mutieren CSS-Animationen nach Abschluss der Wiedergabe, d. h. die Position mutiert zur Ausgangsposition, wenn die Wiedergabe abgeschlossen ist (die Mutation wird sofort abgeschlossen und kann mit bloßem Auge nicht wahrgenommen werden), sodass wir die Mutation verwenden können, um den Anfang und das Ende des Textes zu verbinden. Wir verwenden zwei identische Texte. Wenn der erste Text zu Ende abgespielt ist und der zweite Text abgespielt wird, ändert sich die Animation plötzlich und beginnt erneut mit der Wiedergabe des ersten Textes. Da der Inhalt der beiden Texte derselbe ist, bemerkt der Benutzer dies nicht. denkenIst diese Implementierung derzeit üblich? Diese Methode hat tatsächlich die meisten Anforderungen gelöst, aber wenn weniger Text vorhanden ist oder die Textbreite kleiner als die Fensterbreite ist, treten Probleme auf. Das von mir gezeichnete Rotationslogikdiagramm ist nur ein Beispiel dafür. Wie erreicht man dies, wenn die Textbreite kleiner als die Fensterbreite ist? Tatsächlich ist das Prinzip dasselbe. Eine der Kernfunktionen der Textrotation besteht darin, zwei identische Texte zu haben, aber es gibt eine Voraussetzung, nämlich dass die Breite eines Textes größer als die Breite des Fensters sein muss. Wie kann diese Voraussetzung erreicht werden? Die Lösung besteht darin, den gesamten Text zu kopieren, bis die Breite des Textes größer als die Breite des Fensters ist, und ihn dann in zwei identische Textteile zu verarbeiten. ZusammenfassenDie wichtigsten Punkte der unendlichen Textrotation sind folgende:
Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8" />
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
<title>Text unendliches Karussell</title>
<Stil>
Körper {
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Höhe: 100vh;
}
#wickeln {
Überlauf: versteckt;
Position: relativ;
Breite: 200px;
Höhe: 20px;
Leerzeichen: Nowrap;
}
#inneres {
Position: absolut;
Animation: Folie 5 s linear unendlich;
}
#Erste{
Anzeige: Inline-Block;
Rand: 1px durchgehend rot;
}
#zweite{
Anzeige: Inline-Block;
Rand: 1px durchgehend grün;
}
@keyframes Folie {
0% {
transformieren: übersetzenX(0);
}
100 % {
transformieren: übersetzenX(-50%);
}
}
</Stil>
</Kopf>
<Text>
<div id="wrap">
<div id="inner">
<span id="first">Unser Geschäft verkauft hauptsächlich Ramen, geschnittene Nudeln, gedünstete Nudeln und Reisschüsseln</span>
<span id="second">Unser Geschäft verkauft hauptsächlich Ramen, geschnittene Nudeln, gedünstete Nudeln und Reisschüsseln</span>
</div>
</div>
</body>
</html>Damit ist dieser Artikel über die allgemeine Methode zur Implementierung eines unendlichen Textkarussells mit nativem CSS abgeschlossen. Weitere relevante Inhalte zur Implementierung eines unendlichen Textkarussells mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Ubuntu erstellt Mysql+Keepalived-Hochverfügbarkeitsimplementierung (Dual-Active Hot Standby)
>>: Grundlegende Ideen zum Auffinden von Fehlern in der Web-Frontend-Entwicklung
Artikel empfehlen
Das WeChat-Applet Uniapp realisiert den Löscheffekt durch Wischen nach links (vollständiger Code)
Das WeChat-Applet Uniapp realisiert den Löscheffe...
So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea
Wenn Sie den Text im Textarea-Eingabebereich umbre...
Installation und Verwendung der Ubuntu 18.04 Serverversion (Bild und Text)
1 Schritte zur Systeminstallation Betriebssystemv...
MySQL-Replikation - ausführliche Erklärung und einfaches Beispiel
MySQL-Replikation - ausführliche Erklärung und ei...
So verstehen Sie die Modularität von JavaScript
Inhaltsverzeichnis 1. Browserunterstützung 2. Exp...
Tutorial zu HTML-Formular-Tags (2):
Dieses Tutorial stellt die Anwendung verschiedene...
Schneller Einstieg in die Teleport-Komponenten und Verwendungssyntax von VUE 3
Inhaltsverzeichnis 1. Einführung in das Teleporti...
Deaktivieren Sie die automatische Vervollständigung in HTML, damit der Verlauf nicht angezeigt wird
Das Eingabefeld zeigt beim Eingeben von Inhalten i...
So legen Sie die Tabellenbreite in IE8 und Chrome fest
Wenn die oben genannten Einstellungen in IE8 und C...
Unterschiede und Anwendungsbeispiele von for, for...in, for...of und forEach in JS
for-Schleife Grundlegendes Syntaxformat: für (Var...
30 hervorragende Beispiele für Farbabstimmung im Webdesign
Heute habe ich in diesem Artikel 30 hervorragende ...
Teilen Sie 8 CSS-Tools zur Verbesserung des Webdesigns
Wenn das Website-Design bearbeitet oder geändert ...
Eine Analyse von Div+Float, einem sehr wichtigen Konzept im Website-Design
Beim Erstellen einer Website treten immer wieder P...
Prinzipielle Beispiele für die vier Netzwerktypen von Docker
Vier Netzwerktypen: Keine: Konfigurieren Sie kein...
Detaillierte Erläuterung des auf Python basierenden MySQL-Replikationstools
Inhaltsverzeichnis 1. Einleitung Zweites Training...