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
Was ist das Basis-Tag und was macht es?
Der <base>-Tag gibt die Standardadresse ode...
Konfiguration und Lizenzaktivierung der Remotedesktopdienste von Windows Server 2016 (2 Benutzer)
Die Standardanzahl von Remotedesktopverbindungen ...
Tutorial zur Neuinstallation von MySQL unter Windows 64-Bit (Zip-Version, dekomprimierte Version der MySQL-Installation)
Deinstallieren von MySQL 1. Deinstallieren Sie in...
10 Leistungskonfigurationselemente, die nach der Installation von MySQL angepasst werden müssen
In diesem Blog besprechen wir zehn Leistungseinst...
Fehlerbehebung bei MySQL-Datenverlust
Inhaltsverzeichnis Vorwort Untersuchung vor Ort G...
HTML lädt dynamisch CSS-Stile und JS-Skripte – Beispiel
1. Dynamisches Laden von Skripten Mit der wachsen...
Ubuntu 18.04 Ein-Klick-Upgrade aller Python-Pakete von Drittanbietern und Installation von Python-Paketen
1. Was ist Pip pip ist ein Python-Paketverwaltung...
Vue implementiert den Operationscode zum Klicken auf eine Schaltfläche zum Herunterladen einer Datei (Backend-Java).
Im vorherigen Artikel habe ich die Funktion von V...
Lösung für 404-Fehler beim Herunterladen einer APK-Datei vom IIS-Server
Bei der Verwendung von IIS als Server wurde die A...
Mysql 5.7.17 Winx64-Installationstutorial auf Win7
Softwareversion und Plattform: MySQL-5.7.17-winx6...
Alibaba Cloud beantragt ein kostenloses SSL-Zertifikat (https) von Cloud Shield
Da das Projekt den https-Dienst nutzen muss, habe...
Hintergrundbild-Cache unter IE6
Fehler beim Flackern des CSS-Hintergrundbilds in ...
Lösung für Linux CentOS 6.5 ifconfig kann IP nicht abfragen
Kürzlich sagten einige Freunde, dass sie nach der...
Detaillierte Erläuterung der Verwendung des in Nodejs integrierten Verschlüsselungsmoduls zur Peer-to-Peer-Verschlüsselung und -Entschlüsselung
Verschlüsselung und Entschlüsselung sind wichtige...
Beispiel für die Verwendung von CSS3 zum Erzielen eines glänzenden Schrifteffekts beim Entsperren eines Apple-Telefons
0. Einleitung 18. August 2016 Heute ist mir aufge...