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

Verwenden Sie CSS, um einen kreisförmigen Welleneffekt zu erzielen

Auf Mobilgeräten sehe ich häufig kreisförmige Wel...

So ändern Sie die Zeichensatzkodierung in MySQL 5.5/5.6 unter Linux auf UTF8

1. Melden Sie sich bei MySQL an und verwenden Sie...

Detaillierte Erklärung der Rolle des neuen Operators in Js

Vorwort Js ist heutzutage die am häufigsten verwe...

Zugriffsvorgang im MySQL-Befehlszeilenmodus MySQL-Datenbankvorgang

Nutzungsumgebung Geben Sie im cmd-Modus mysql --v...

Ein kurzes Verständnis der Unterschiede zwischen MySQL InnoDB und MyISAM

Vorwort MySQL unterstützt viele Arten von Tabelle...

jQuery realisiert Bildhervorhebung

Es ist sehr üblich, Bilder auf einer Seite hervor...

js Promise-Methode zur gleichzeitigen Steuerung

Inhaltsverzeichnis Frage Hintergrund Idee & U...

Installationsprozess von CentOS8 Linux 8.0.1905 (Abbildung)

Die aktuellste Version von CentOS ist CentOS 8. A...

Vue implementiert Login-Sprung

In diesem Artikelbeispiel wird der spezifische Co...

So konfigurieren Sie MySQL8 in Nacos

1. Erstellen Sie die MySQL-Datenbank nacos_config...

Lösen Sie das Problem der Containerverwaltung mit Docker Compose

Im Docker-Design führt ein Container nur eine Anw...