Startseite » Codierung » Marquee in CSS - Anfängerleitfaden

    Marquee in CSS - Anfängerleitfaden

    Marquee wurde erstmals in Internet Explorer eingeführt und war in den 90er Jahren sehr beliebt, bevor das W3C es aus Gründen der Benutzerfreundlichkeit aus dem HTML-Standardelement ausschloss. Webdesigner wurden aufgefordert, das Tag nicht zu verwenden.

    Überraschenderweise feiert der Laufrahmen nun ein Comeback, nicht in einem Tag Format wie in einem CSS-Modul. Dieses Modul ist als Teil der Webkit-CSS-Spezifikation verfügbar, und das W3C arbeitet derzeit auch an einem ähnlichen Modul. Da sich die W3C-Version jedoch noch in der Phase der Kandidatenempfehlung befindet, ist sie noch nicht anwendbar. Zum jetzigen Zeitpunkt behandeln wir nur den aus der Webkit-Spezifikation.

    Die Syntax

    Zunächst kann der Laufrahmen mit der folgenden Kurzschreibensyntax definiert werden.

    -Webkit-Marquee: [Richtung] [Inkrement] [Wiederholung] [Stil] [Geschwindigkeit]

    Ich glaube, jeder der in der obigen Syntax benötigten Werte ist ziemlich selbsterklärend, oder Sie können sie in dieser Dokumentation ausreichend erklärt finden. Wenn Sie sich eingehender damit befassen wollen, wie diese Syntax funktioniert, können Sie immer zuerst auf die Dokumentation zugreifen.

    Dann machen Sie mit uns weiter, um einige echte Beispiele zu erstellen und zu sehen, wie es in die Tat umgesetzt wird.

    Beispiel 1: Scrollen durch den Text

    In Ordnung, im ersten Beispiel erstellen wir die klassische Bewegung des Laufrahmens, bei der der Text von rechts nach links verschoben wird.

    Erstellen Sie unser Textmarkup wie folgt:

    Lollipop-Topping-Zitronen-Tropfen-Jujuben tragen Obstkuchen-Törtchen-Lakritz-Sesam-Schnaps auf.

    Definieren Sie dann den Laufrahmen mit der folgenden Syntax.

     -Webkit-Marquee: Auto Medium Unendlich normaler Scroll; Überlauf-x: -webkit-Marquee;

    Wenn die Laufrichtung auf eingestellt ist Auto, es wird standardmäßig von rechts nach links verschoben; Alternativ können Sie diesen Wert in ändern links. Beachten Sie auch, dass die Überlauf-x Eigenschaft muss auf gesetzt sein -Webkit-Festzelt so dass der inhalt immer als eins wirkt. Wenn Sie diese Eigenschaft nicht angeben, wird der Text nicht weiter verschoben.

    Siehe die Demo.

    Beispiel 2: Hüpfen Sie hin und her

    Im zweiten Beispiel werden wir versuchen, der Laufschrift einen anderen Stil zu geben. Diesmal verwenden wir wechseln anstatt scrollen und ändern Sie den Richtungswert in Recht. Auf diese Weise bewegt sich der Laufrahmen von links nach rechts und hüpft dann vor und zurück.

     -Webkit-Laufschrift: Auto mittel unendlich unendlich normal; Überlauf-x: -webkit-Marquee;

    Siehe die Demo

    Beispiel 3: Text nach oben verschieben

    Und für das letzte Beispiel ändern wir die Laufrichtung, um nach oben zu gelangen. Es gibt zwei Richtung Werte, um dies zu tun; Sie können den Wert in ändern oben oder voraus.

    Ich persönlich verstehe nicht, warum das Webkit zwei Werte zur Verfügung gestellt hat, die im Wesentlichen dasselbe tun, da ich denke, dass dies bei manchen Leuten zu Verwirrung führen kann.

     -Webkit-Marquee: bis mittelgroße unendliche Bildlaufnormalität; Überlauf-x: -webkit-Marquee;

    Siehe die Demo

    Außerdem habe ich noch einige Beispiele zusammengestellt, die jedoch überwältigend sind, wenn sie alle hier erklärt werden.

    Sie können jedoch die gesamte Demo anzeigen und die Quellen über die folgenden Links herunterladen.

    • Demo
    • Quelle herunterladen

    Schlussgedanke & Referenzen

    Ich war zuerst überrascht, dass es immer noch Interesse an dem Festzelt gibt, von dem ich dachte, dass es sein Ende gefunden hatte. Dies führte mich auch zu der Frage, wie ein solches CSS-Modul nützlich sein wird. Tatsächlich unterstützt jeder Browser immer noch das Erbe von Etikett.

    Also was denkst du? Ist das Festzelt in diesem Alter noch relevant und würde es für modernes Webdesign nützlich sein??

    Wenn Sie immer noch neugierig auf dieses Marquee-Zeug sind, können Sie einige der folgenden Referenzen besuchen: