Css3 realisiert nahtloses Scrollen und Anti-Shake

Css3 realisiert nahtloses Scrollen und Anti-Shake

Frage

Das nahtlose Scrollen von Bildern und Texten wirkt auf Mobiltelefonen grundsätzlich gut, allerdings wackeln die Bilder auf manchen mobilen Browsern stark!

Falsches Schreiben

Sie können weder left noch margin-left wie folgt verwenden:

.donghua.aktiv{
  Animation: Scrollen, langsam rein-raus, 1 Sekunde, unendlich abwechselnd;
  -Webkit-Animation: Scrollen Sie abwechselnd langsam rein und raus, 1 Sekunde lang und unendlich;
}
@keyframes scrollen {
  aus {
    links: 0;
  }
  Zu {
    links: -353px;
  }
}
-webkit-@keyframes scrollen {
  aus {
    links: 0;
  }
  Zu {
    links: -353px;
  }
}

Problemumgehung

Ein Element darin wird auf Mobiltelefonen furchtbar wackeln. Verwenden Sie die 2D-Übersetzung wie folgt:

.donghua.aktiv{
  Animation: Scrollen, langsam rein-raus, 1 Sekunde, unendlich abwechselnd;
  -Webkit-Animation: Scrollen Sie abwechselnd langsam rein und raus, 1 Sekunde lang und unendlich;
}
@keyframes scrollen {
  0% {
    transformieren: übersetzen(0px, 0px);
  }

  100 % {
    transformieren: übersetzen(0px, -353px);
  }
}
@-webkit-keyframes scrollen {
  0% {
    transformieren: übersetzen(0px, 0px);
  }

  100 % {
    transformieren: übersetzen(0px, -353px);
  }
}

Oben finden Sie Einzelheiten dazu, wie Sie mithilfe von CSS3 nahtloses Scrollen und Anti-Shake erreichen. Weitere Informationen zu nahtlosem Scrollen und Anti-Shake in CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<:  So importieren und exportieren Sie Cookies und Favoriten in FireFox

>>:  Detaillierte Erläuterung der Konvertierung von JavaScript-Objekten in primitive Werte

Artikel empfehlen

Analyse des Problems der Hyper-V-Installation unter CentOS 8

CentOS 8 ist schon seit längerem auf dem Markt. A...

jQuery benutzerdefinierter Lupeneffekt

In diesem Artikelbeispiel wird der spezifische Co...

So passen Sie mit CSS einen schöneren Link-Prompt-Effekt an

Vorschlag: Das möglichst häufige handschriftliche ...

So zeigen Sie Anwendungsprotokolle von Docker-Containern an

Docker-Attach-Befehl docker attach [options] 容器st...

Vergleich der Vorteile von vue3 und vue2

Inhaltsverzeichnis Vorteil 1: Optimierung des Dif...

Praktische Methode zum Löschen von Dateien über die Linux-Befehlszeile

rm-Befehl Der Befehl rm wird von den meisten Benu...

So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux

Dieser Artikel beschreibt, wie man über Docker ei...

Erfahren Sie, wie Sie den JVM-Speicher von Tomcat über JConsoler überwachen

Inhaltsverzeichnis 1. So überwachen Sie Tomcat 2....

Prinzip der MySQL-Paging-Analyse und Effizienzverbesserung

Prinzip der MySQL-Paging-Analyse und Effizienzver...

Beispielcode zur Implementierung einer schwebenden Seitenbox basierend auf JS

Wenn die Bildlaufleiste nach unten gezogen wird, ...

CSS zum Erzielen eines Chat-Blaseneffekts

1. Rendern JD-Effekt Simulationseffekt 2. Grundsa...