Eine laufende Zeichenfolge ist eine spektakuläre Möglichkeit, auf einen bestimmten Text oder eine bestimmte Information auf einer Webseite aufmerksam zu machen. Dieser Effekt wurde im Fernsehen weit verbreitet verwendet und ist ein beliebtes Feature auf verschiedenen Websites. Wenn Sie Ihrer Website oder Ihrem Blog eine laufende Zeile hinzufügen möchten, können Sie dies mit Ihren eigenen Händen tun. Wenn Sie diese Schritt-für-Schritt-Anleitung befolgen, können Sie eine spektakuläre Laufzeile in HTML erstellen.
Schritt 1: Erstellen Sie einen Container für die Laufzeile. Sie benötigen das Element um einen Container zu erstellen. Verwenden Sie ein Attribut id um einem Container eine eindeutige ID zuzuweisen. Zum Beispiel können Sie Folgendes verwenden id="marquee" um den Laufzeilenbehälter zu identifizieren.
Schritt 2: Erstellen Sie ein Element für den Text. Erstellen Sie in einem Container ein Element oder ein anderes Titelelement, abhängig von Ihrer Präferenz. Schreiben Sie den Text, den Sie in der laufenden Zeile anzeigen möchten, in dieses Element.
Schritt 3: Wenden Sie die Stile auf den Container und den Text an. Erstellen Sie in der CSS-Datei Stile für Ihren Container und Text. Weisen Sie dem Container Breite und Höhe zu und wählen Sie eine Hintergrundfarbe und einen Rahmen aus. Legen Sie für den Text die Farbe, Größe und Schriftart fest und wählen Sie die Ausrichtung des Textes aus.
Beispiel für Stile:
#marquee width: 100%;
height: 50px;
background-color: #f2f2f2;
border: 1px solid #ccc;
overflow: hidden;
white-space: nowrap;
position: relative;
>
#marquee p color: #333;
font-size: 18px;
font-family: Arial, sans-serif;
padding: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
animation: marquee 10s linear infinite;
>
@keyframes marquee 0% transform: translateX(100%);
>
100% transform: translateX(-100%);
>
>
Schritt 4: Fügen Sie eine Animation für die Laufzeile hinzu. Verwenden Sie CSS-Keyframes, um einen reibungslosen Effekt zu erzielen, den Text in einem Container zu verschieben. Stellen Sie die Anfangs- und Endposition des Textes mithilfe der Funktion ein translateX() durch Festlegen eines positiven Werts für die Startposition und eines negativen Werts für die Endposition. Weisen Sie die Zeit und den Typ der Animation mithilfe des Attributs zu animation. Zum Beispiel können Sie Folgendes verwenden animation: marquee 10s linear infinite; um eine laufende Zeichenfolge zu erstellen, die sich 10 Sekunden lang im linearen Stil nach links bewegt und sich endlos wiederholt.
Jetzt wissen Sie, wie man eine laufende Schnur mit eigenen Händen macht. Verwenden Sie diese Schritt-für-Schritt-Anleitung, um Ihrer Website ein spektakuläres Feature hinzuzufügen und auf wichtige Nachrichten oder Informationen aufmerksam zu machen.
Arbeitsvorbereitung
Bevor Sie mit der Erstellung eines Laufs beginnen, müssen Sie sich vorbereiten und sicherstellen, dass Sie über alle notwendigen Werkzeuge und Materialien verfügen. Hier ist eine Liste von dem, was Sie brauchen:
- Ein Computer, auf dem ein Texteditor installiert ist (z. B. Notepad++, Sublime Text usw.)
- Internet zum Herunterladen der benötigten Dateien und Ressourcen
- Kenntnisse der Grundlagen von HTML, CSS und JavaScript
- Praktische Tastatur für die Arbeit mit dem Editor
Stellen Sie sicher, dass Ihr Computer ordnungsgemäß funktioniert und über genügend freien Festplattenspeicher verfügt. Es wird auch empfohlen, eine Sicherungskopie Ihrer Dateien zu speichern, bevor Sie beginnen, um Datenverluste im Falle eines Systemausfalls zu vermeiden.
