Wie kann ich einen responsiven CSS3-Marquee-Effekt ohne fest codierte Werte erstellen?

Marquee-Effekt in CSS3: Vermeiden spezifischer Werte für die Textanpassung

In CSS3-Animationen ist es oft wünschenswert, einen Marquee-Effekt zu erstellen, bei dem Text scrollt über den Bildschirm. Die Verwendung spezifischer Werte wie „margin-left: -4200px;“ Der Texteinzug kann für unterschiedliche Textlängen einschränkend sein.

Eine Möglichkeit, dieses Problem zu vermeiden, besteht darin, den Text in ein span-Element einzuschließen und stattdessen die Eigenschaft „padding-left“ zu verwenden:

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%; /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

Dadurch passt sich die Animation an die Breite des Textes an und sorgt dafür, dass dieser vollständig über den Bildschirm läuft. Darüber hinaus kann der „Hover“-Status verwendet werden, um die Animation anzuhalten, wenn der Benutzer mit der Maus über den Text fährt:

.marquee span:hover {
  animation-play-state: paused;
}

Um die Präferenzen des Benutzers zu berücksichtigen, implementiert dieser Code schließlich das Medium „prefers-reduced-motion“. Abfrage, die die Animationsgeschwindigkeit verringert oder sie für Benutzer, die möglicherweise weniger Bewegung bevorzugen, vollständig deaktiviert.

Das obige ist der detaillierte Inhalt vonWie kann ich einen responsiven CSS3-Marquee-Effekt ohne fest codierte Werte erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!