Erstellen Sie einen glatten, reinen CSS -Text -Schieberegler

In diesem Artikel wird Sie beanstandet, wie Sie reine CSS verwenden, um einen glatten Textschieber zu erstellen, Text überlappende Probleme zu lösen und den Sliding-Effekt von rechts nach links zu erreichen. Durch Anpassung des linken Attributs des Schlüsselframe wird der Text erst zurückgesetzt, nachdem er vollständig aus dem Bildschirm herausgezogen wird, wodurch sich überlappend beim Gleiten und letztendlich ein reibungsloses visuelles Erlebnis erreicht wird. Dieses Tutorial enthält detaillierte Code -Beispiele und wichtige Schritte, mit denen Sie einfach einen schönen und praktischen CSS -Text -Schieberegler erstellen können.

Implementierungsprinzip

Die Kernidee besteht darin, das linke Attribut jedes Textelements zu steuern, es von der rechten Seite des Bildschirms einzuschieben, eine Weile auf dem Bildschirm zu bleiben und dann von der linken Seite des Bildschirms zu verschieben und vom Bildschirm aus zu bleiben. Zu Beginn der Animationsschleife wird der Textelement sofort auf die rechte Seite des Bildschirms zurückgesetzt. Da dieser Reset keinen Animationseffekt hat, wird der Benutzer ihn nicht sehen.

Spezifische Schritte

1. HTML -Struktur

   Verwenden Sie einen Container, der mehrere Textelemente enthält. Jeder Textelement sollte auf die absolute Positionierung gesetzt werden, damit seine Position über die CSS -Animation gesteuert werden kann.

    <div class="trev-top bar overflow versteckte" style="height: 56px;">
     <div class="Container-Fluid">
       <div class="row position-relativ">
         <div class="col-12 col-md trev-top bar-item text-center Position-absolute">
           <i class="trev-top bar-fa-icon fa-Solid FA-Truck-Fast"> </i> Schneller Versand
         </div>
   
         <div class="col-12 col-md trev-top bar-item text-center Position-absolute">
           <i class="Trev-top-bar-fa-icon fa-Solid Fa-Arrow-Rechts-Arrow-Links"> </i> 100 Tage Rechtsrechnung
         </div>
   
         <div class="col-12 col-md trev-top bar-item text-center Position-absolute">
           <i class="Trev-Top-Bar-Fa-Icon FA-Solid FA-File-Invoice-Dollar-Dollar"> </i> mit Rechnung kaufen
         </div>
   
         <div class="col-12 col-md trev-top bar-item text-center Position-absolute">
           <i class="trev-top bar-fa-icon fa-solid fa-gears"> </i> bewährte Qualität
         </div>
       </div>
     </div>
   </div>

   Hier werden Bootstrap -Kurse verwendet, um das Layout zu unterstützen, und es wird ein fantastisches Symbol für die Schriftart.

2. CSS -Stil

   • Legt den Stil des Behälters fest, z. B. Hintergrundfarbe, Schriftfarbe, Schriftgröße und Ränder.
   • Legt den Stil der Textelemente fest, z. B. die absolute Positionierung.
   • Definieren Sie Keyframe -Animationen und steuern Sie das linke Attribut jedes Textelements.

    .Trev-Top-Bar {
     Hintergrundfarbe: #256dff;
     Farbe: #ffff;
     Schriftgröße: 14px;
     Padding-Top: 1Rem;
     Padding-Bottom: 1Rem;
   }
   
   .Trev-Top-Bar .Trev-Top-Bar-Item: First-Child {
     -Webkit-Animation: Top-Bar-Animation-1 16S Locker unendlich;
     Animation: Top-Bar-Animation-1 16s lindern unendlich;
   }
   
   .Trev-top-bar .Trev-Top-Bar-Item: N-Child (2) {
     -Webkit-Animation: Top-Bar-Animation-2 16s Leichten Unendlichen;
     Animation: Top-Bar-Animation-2 16s lindern unendlich;
   }
   
   .Trev-Top-Bar .Trev-Top-Bar-Item: N-Child (3) {
     -Webkit-Animation: Top-Bar-Animation-3 16S Locker unendlich;
     Animation: Top-Bar-Animation-3 16s lindern unendlich;
   }
   
   .Trev-top-bar .Trev-Top-Bar-Item: N-Child (4) {
     -Webkit-Animation: Top-Bar-Animation-4 16S Locker unendlich;
     Animation: Top-Bar-Animation-4 16s lindern unendlich;
   }
   
   .Trev-Top-Bar .Trev-Top-Bar-Fa-Icon,
   .Trev-top-bar .icon {
     Farbe: #ffff;
     Rand-Rechts: .3rem;
   }
   
   .Trev-Top-Bar .Trev-Top-Bar-Fa-Icon {
     Schriftgröße: 16px;
   }
   
   .Trev-top-bar .icon Svg {
     Breite: 16px;
     Höhe: 16px;
   }
   
   @Keyframes Top-Bar-Animation-1 {
     0% {
       Links: 100%;
     }
     8,33% {
       links: 0;
     }
     16,66% {
       links: 0;
     }
     24,99% {
       Links: -100%;
     }
     100% {
       Links: -100%;
     }
   }
   
   @keyframes Top-Bar-Animation-2 {
     0% {
       Links: 100%;
     }
     24,99% {
       Links: 100%;
     }
     33,33% {
       links: 0;
     }
     41,66% {
       links: 0;
     }
     49,99% {
       Links: -100%;
     }
     100% {
       Links: -100%;
     }
   }
   
   @Keyframes Top-Bar-Animation-3 {
     0% {
       Links: 100%;
     }
     49,99% {
       Links: 100%;
     }
     58,33% {
       links: 0;
     }
     66,66% {
       links: 0;
     }
     74,99% {
       Links: -100%;
     }
     100% {
       Links: -100%;
     }
   }
   
   @Keyframes Top-Bar-Animation-4 {
     0% {
       Links: 100%;
     }
     74,99% {
       Links: 100%;
     }
     83,33% {
       links: 0;
     }
     91,66% {
       links: 0;
     }
     100% {
       Links: -100%;
     }
   }

   Keyframe Erläuterung:

   • 0%: Der Textelement befindet sich auf der rechten Seite des Bildschirms (links: 100%).
   • 8.33% (für das erste Textelement): Das Textelement beginnt den Eingabedin in den Bildschirm (links: 0).
   • 16,66% (für den ersten Textelement): Das Textelement wird vollständig auf dem Bildschirm angezeigt (links: 0).
   • 24,99% (für den ersten Textelement): Das Textelement beginnt, sich aus dem Bildschirm zu bewegen (links: -100%).
   • 100%: Der Textelement ist vollständig vom Bildschirm entfernt (links: -100%).

   Beachten Sie, dass die Animations -Startzeit für jeden Textelement unterschiedlich ist, um kontinuierliche Gleiteffekte zu erzielen. Passen Sie das Animations-Zell an die Auftrittszeit jedes Textelements an.

3. Die notwendigen Bibliotheken einführen

   Stellen Sie sicher, dass Sie die CSS -Dateien für Font Awesome und Bootstrap vorstellen.

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="Stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="Stylesheet">

Dinge zu beachten

• Stellen Sie sicher, dass der Container über den Überlauf: Versteckten Stil enthält, um zu verhindern, dass Textelemente überfließen.
• Passen Sie die Animationszeit und -verzögerung gemäß den tatsächlichen Bedürfnissen an, um den besten visuellen Effekt zu erzielen.
• Vermeiden Sie es, unnötige Zwischenzustände in Keyframes zu verwenden, und vereinfachen Sie den Animationsprozess.
• Wenn Sie komplexere Animationseffekte (z. B. Fades) unterstützen müssen, können Sie JavaScript verwenden, um die Implementierung zu unterstützen.

Zusammenfassen

In den oben genannten Schritten können Sie reine CSS verwenden, um einen glatten Textschieberegler zu erstellen, um überlappende Probleme mit textüberlappenden Problemen zu vermeiden und einen Gliederseffekt nach rechts zu linken. Diese Methode ist einfach und leicht zu verstehen, ohne sich auf JavaScript zu verlassen, und eignet sich für Szenarien mit hohen Leistungsanforderungen. Das Beherrschen dieser Technologie kann Ihrer Website oder Anwendung attraktive dynamische Effekte verleihen.

Das obige ist der detaillierte Inhalt vonErstellen Sie einen glatten, reinen CSS -Text -Schieberegler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!