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

Vue implementiert einen Wasserfallfluss mit unendlichem Laden

In diesem Artikelbeispiel wird der spezifische Co...

Grundlegende Referenztypen der erweiterten JavaScript-Programmierung

Inhaltsverzeichnis 1. Datum 2. RegExp 3. Original...

Einführung in die CSS-Stilklassifizierung (Grundkenntnisse)

Klassifizierung von CSS-Stilen 1. Interner Stil -...

MySQL Master-Slave-Prinzip und Konfigurationsdetails

MySQL Master-Slave-Konfiguration und Prinzip, zu ...

Beispiel für eine HTTPS-Konfigurationsmethode für den Nginx-Server

Linux: Linux-Version 3.10.0-123.9.3.el7.x86_64 Ng...

Detaillierte Erklärung der Lösung zum Vergessen des Passworts in MySQL 5.7

Umwelt: [root@centos7 ~]# uname -r 3.10.0-514.el7...

Die Fallstricke bei der Bereitstellung von Angular-Projekten in Nginx

Wenn man online nach Methoden sucht, um Angular -...

So erweitern Sie den Speicherplatz eines Linux-Servers

Inhaltsverzeichnis Vorwort Schritt Vorwort Heute ...

Implementierung eines Web-Rechners mit nativem JavaScript

In diesem Artikel wird der spezifische JavaScript...

So benennen Sie die Tabelle in MySQL um und worauf Sie achten müssen

Inhaltsverzeichnis 1. Tabellenmethode umbenennen ...