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
Lösen Sie das Problem, dass der MySQL-Verbindungsport belegt ist und Dateipfadfehler verursacht
Heute Morgen hatte ich vor, mit Wampserver eine P...
Verwenden Sie href in HTML, um beim Klicken auf einen Link ein Dialogfeld zum Herunterladen von Dateien anzuzeigen.
Ich habe heute einen neuen Trick gelernt. Ich kann...
Lösung für das Problem des wiederholten Auftauchens des Nachrichten-Popup-Fensters von Element
Inhaltsverzeichnis 1. Verwendung 2. Lösen Sie das...
Beispielcode zum Generieren eines QR-Codes mit js
Vor einiger Zeit musste das Projekt die Funktion ...
Zusammenfassung des Betriebs und der Wartung von Linux von grundlegenden bis zu fortgeschrittenen Wissenspunkten
Die Arbeit als Betriebs- und Wartungsingenieur is...
Machen Sie sich nicht die Mühe mit JavaScript, wenn es mit CSS geht
Vorwort Jede Anwendung, die in JavaScript geschri...
So erstellen Sie Gitlab auf CentOS6
Vorwort Das ursprüngliche Projekt wurde im öffent...
Installations- und Nutzungsprotokoll von VMware ESXi (mit Download)
Inhaltsverzeichnis 1. Installieren Sie ESXi 2. ES...
Implementierung von Wasserfall-Layout + dynamischem Rendering
Inhaltsverzeichnis Typische Wasserfall-Website Wa...
Tutorial zur Installation und Konfiguration von Tomcat auf Alibaba Cloud Server und zum Hinzufügen externer Netzwerkzugriffsports
Alibaba Cloud Server installiert und konfiguriert...
Programme zum Abfragen und Löschen der Portnutzung im Windows-Betriebssystem
Im Windows-Betriebssystem das Programm zum Abfrag...
UDP DUP-Timeout UPD-Portstatus-Erkennungscodebeispiel
Ich habe bereits zuvor ein Beispiel geschrieben, ...
Zusammenfassung der Wissenspunkte zur MySQL-Architektur
1. Datenbanken und Datenbankinstanzen Beim Studiu...
Vue-Statusverwaltung: Verwendung von Pinia statt Vuex
Inhaltsverzeichnis 1. Was ist Pinia? 2. Pinia ist...
Eine kurze Diskussion über die Definition und Vorsichtsmaßnahmen von H-Tags
Den Ergebnissen zufolge gibt es für die Definitio...