Beispielcode zur Implementierung eines Laufschriftformats mit CSS3

Hintergrund

Folgendes ist passiert: Luzhu erfuhr zufällig von einem Mobiltelefon mit dem besten externen Lautsprecher im Universum! ! ! Ich habe den 618-Verkauf ausgenutzt und spontan eins gekauft. Schließlich ist Luzhu ein echter Elektronik-Enthusiast! ! ! Aber als Luzhu die Logistikinformationen überprüfte. . . . . .

Nun, mein verdammter Erkundungsdrang hat meine Aufmerksamkeit auf dieses abrupte Festzelt gelenkt (ca, es sieht so aus, als würde ich heute keine Waren erhalten!!!)

Reden wir darüber, wie wir das erreichen können (dieser Witz ist so schwer nachzuvollziehen)

Rendern

Logische Beschreibung

Das p-Tag enthält zwei Span-Tags (Eingabeaufforderungstext). Um das p-Tag zu positionieren, sind zwei Spans erforderlich oder mehr als 2. Ändern Sie den linken Wert des p-Tags, um ihn an das Ende des ersten Span-Tags zu verschieben. Siehe Abbildung! ! ! Wenn der zweite Abschnitt die Ausgangsposition erreicht, wird die zweite Bewegung zyklisch ausgeführt und nahtlos angeschlossen.

Egal ob PC oder Handy, auf mobilen Geräten wird die Drehlaterne sicher häufiger zu sehen sein. Gemäß dem Designentwurf gibt die Benutzeroberfläche die spezifische Breite des Beschriftungstexts für die Spanne an, also: Bewegungsdistanz = Spannbreite + Leerraum zwischen zwei Spannen - linker Wert des linken roten Bereichs

Code-Implementierung

HTML-Teil:

 <div id="app">
    <div Klasse="oben">
      <p>
        <span class="tips">Aufgrund des stark gestiegenen Bestellvolumens während des Aktionszeitraums kann sich die Lieferung Ihrer Bestellung verzögern. Bitte haben Sie Geduld~</span>
        <span>Aufgrund des stark gestiegenen Bestellvolumens während des Aktionszeitraums kann sich die Lieferung Ihrer Bestellung verzögern. Bitte haben Sie Geduld~</span>
      </p>
    </div>
    <div Klasse="Haupt">
      <h6>Dann hier der Eintopf</h6>
      <h4>Externer Lautsprecher ist das Beste bei Mobiltelefonen</h4>
      <h2>Der Unbesiegbarste im Universum</h2>
      <h6>Xiaomi 10 Pro</h6>
      <h2>Ich akzeptiere keine Argumente</h2>
      <h3>·</h3>
      <h3>·</h3>
      <h3>·</h3>
      <h3>·</h3>
    </div>
  </div>

CSS-Teil:

.Tipps{
      Breite: 560px;
    }
    P{
      Position: absolut;
      Höhe: 34px;
      links: 34px;
      Leerzeichen: Nowrap;
      Anzeige: Flex;
      Animation: lineare Bewegung, 12 s, unendlich;
      Animationsverzögerung: 3 s;
    }
    @keyframes verschieben {
      0 % { links: 34px; }
      100 % { links: -526px; }
    }
    /* Bitte ignorieren Sie das Folgende, der Fokus liegt auf dem Obigen*/
    *{Rand: 0; Polsterung: 0;}
    Körper, html {Höhe: 100%;}
    #app{
      Höhe: 100%;
      Hintergrund: #ececec;
      Rand: 0 automatisch;
      Anzeige: Flex;
      Flex-Richtung: Spalte;
    }
    .hauptsächlich{
      biegen: 1;
    }
    .Spitze{
      Position: relativ;
      Überlauf: versteckt;
      Höhe: 34px;
      Hintergrund: #fff;
    }
    .top span{
      Zeilenhöhe: 34px;
      Anzeige: Inline-Block;
    }
    .top::vorher{
      Inhalt: "";
      Position: absolut;
      links: 0;
      oben: 0;
      Höhe: 100%;
      Breite: 34px;
      Z-Index: 9;
      Hintergrundbild: linearer Farbverlauf (90 Grad, #f00 0 %, #f00 60 %, transparent 100 %);
    }
    .top::nach{
      Inhalt: "";
      Position: absolut;
      rechts: 0;
      oben: 0;
      Höhe: 100%;
      Breite: 34px;
      Z-Index: 9;
      Hintergrundbild: linearer Farbverlauf (-90 Grad, #f00 0 %, #f00 60 %, transparent 100 %);
    }
    h1,h2,h3,h4,h5,h6{
      Rand: 20px automatisch;
      Textausrichtung: zentriert;
    }

Persönliches Resümee

Das Luzhu-Projekt beinhaltet ein Laufschriftfeld. Im Luzhu-Projekt wird eine relativ einfache Methode verwendet, nämlich die Verwendung des Laufschriftfeld-Tags. Dies hat einen integrierten Laufschrifteffekt! ! ! Dieses Tag ist sehr leistungsfähig. Ein Tag kann das Problem lösen, viel CSS oder JS schreiben zu müssen. Warum sollte ich also in einem so großen Kreis herumlaufen?

Erstens kann es die Anfangs- und Endverbindung nicht so herstellen wie ich! ! !

Zweitens beschreibt die offizielle Website dieses Tag wie folgt: Diese Funktion ist veraltet. Obwohl sie in einigen Browsern möglicherweise noch funktioniert, wird von ihrer Verwendung abgeraten, da sie jederzeit entfernt werden könnte. Versuchen Sie, ihre Verwendung zu vermeiden.

Ähm~ Für diejenigen, die nicht gut Englisch können, lautet die Übersetzung: Das Element ist veraltet, bitte verwenden Sie es nicht mehr. Obwohl einige Browser es noch unterstützen, ist es nicht erforderlich. Außerdem ist die Verwendung dieses Elements grundsätzlich eines der schlimmsten Dinge, die Sie Ihren Benutzern antun können. Tun Sie es also bitte nicht.

Wählen Sie also die geschmorte Variante. usw! Wenn die Bildschirmbreite für die Eingabeaufforderung ausreicht, sollte keine Bewegung erfolgen. Dies kann durch js gesteuert werden. Betrachten Sie es einfach als Hausaufgabe!

Damit ist der Artikel über den Beispielcode zur Implementierung eines Textlaufrahmens mit CSS3 abgeschlossen. Weitere Informationen zum CSS3-Textlaufrahmen mit CSS3 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!