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

Tic-Tac-Toe-Spiel in reinem CSS3 implementiert

Wirkung der Operation: html <div Klasse="...

So verwenden Sie „not in“ zur Optimierung von MySql

Als ich kürzlich in einem Projekt eine Auswahlabf...

Detaillierte Erläuterung des virtuellen DOM in der Vue-Quellcodeanalyse

Warum brauchen wir virtuellen Dom? Virtual DOM wu...

Wartungsmethode für den Innodb-Systemtabellenbereich

Umweltbeschreibung: Es gibt eine laufende MySQL-U...

Vollständige Schritte zum Erstellen eines Hochleistungsindex in MySQL

Inhaltsverzeichnis 1. Index-Grundlagen 1. Arten v...

Allgemeine Struktur-Tags in XHTML

Struktur Text, Kopf, HTML, Titel Text abbr, Akron...

JavaScript-Canvas zum Erzielen eines Regentropfeneffekts

In diesem Artikelbeispiel wird der spezifische Co...

9 Möglichkeiten zum Ein- und Ausblenden von CSS-Elementen

Bei der Erstellung von Webseiten ist das Anzeigen...

Eine Zusammenfassung der Gründe, warum MySQL keinen Datumsfeldindex verwendet

Inhaltsverzeichnis Hintergrund erkunden Zusammenf...

Detaillierte Erklärung der MySQL-Dreiwertelogik und NULL

Inhaltsverzeichnis Was ist NULL Zwei Arten von NU...

Samba-Serverkonfiguration unter Centos7 (tatsächlicher Kampf)

Samba Übersicht Samba ist eine kostenlose Softwar...

Details zum JavaScript-Prototyp

Inhaltsverzeichnis 1. Übersicht 1.1 Was ist ein P...