Wie erstelle ich einen Responsive Marquee-Effekt mit CSS3-Animation?

Wie kann ich mit CSS3-Animationen einen responsiven Marquee-Effekt erstellen?

CSS3-Animationen bieten eine leistungsstarke Möglichkeit, Ihren Website-Elementen Bewegung zu verleihen. Eine der häufigsten Anwendungen ist der Marquee-Effekt, bei dem Text über den Bildschirm läuft. Allerdings kann es eine Herausforderung sein, einen Marquee-Effekt zu erstellen, der sich an Text beliebiger Länge anpasst.

Vorherige Versuche

Traditionelle Ansätze zum Erstellen von Marquee-Effekten basieren oft auf festen Werten wie margin-left:-4200px; . Während dies für bestimmte Textgrößen funktioniert, wird es problematisch, wenn die Textlänge variiert.

Anpassen des Ansatzes

Die Verwendung eines leicht modifizierten Markups mit einer innerhalb des Absatzes verschachtelten Spanne ermöglicht mehr reaktionsfähige Lösung. Hier ist der aktualisierte Ansatz:

.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;

  padding-left: 100%;
  will-change: transform;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

Bei diesem Ansatz wird die Breite des Bereichs auf „max-content“ eingestellt, um sicherzustellen, dass sie sich an die Länge des Textes anpasst. Der Abstand links wird verwendet, um den Text außerhalb des sichtbaren Bereichs zu verschieben, und die Animation übersetzt den Text wieder in die Ansicht, wodurch der Laufschrifteffekt entsteht.

Respektierung der Benutzereinstellungen

Aus Gründen der Barrierefreiheit gilt: Code respektiert Benutzerpräferenzen in Bezug auf Bewegung. Wenn der Benutzer eine reduzierte Bewegung bevorzugt, wird die Animation deaktiviert.

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01s;
    width: auto;
    padding-left: 0;
  }
}

Durch die Integration dieser Techniken können Sie einen reaktionsfähigen Laufschrifteffekt erstellen, der sich an jede Textmenge anpasst und so die Flexibilität und Zugänglichkeit Ihres Designs verbessert.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Responsive Marquee-Effekt mit CSS3-Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!