CSS zum Implementieren von QQ-Browserfunktionen

Hintergrundbild:
 linearer Farbverlauf (Richtung, Farbstopp1, Farbstopp2, …);

3. Zentrieren Sie das Blockebenen-Label

Position: absolut;
links: 50 %;
oben: 50 %;
Rand links: die Hälfte seiner eigenen Breite;
Rand oben: die Hälfte seiner eigenen Höhe;

oder:

Position: absolut;
links: 50 %;
oben: 50 %;
transformieren:übersetzenX(-50%) übersetzenY(-50%);

4. Machen Sie einen Back-to-Back-Effekt:

① Fügen Sie zunächst dem übergeordneten Feld des Back-to-Back-Effekts einen perspektivischen Effekt hinzu
Fügen Sie dem übergeordneten Feld mit dem Back-to-Back-Effekt einen 3D-Effekt hinzu: transform-style: preserve-3d;
② Verwenden des versteckten Backface-Attributs: backface-visibility:hidden
③ Animationseffekt, kontinuierliche Rotation

5. Ringrotationseffekt

① Benutzerdefinierte Animation ② Passen Sie verschiedene XYZ-Winkel an, um einen Rotationseffekt zu erzeugen

6. Fehlerauswirkung

Zunächst gibt es eine aktuelle Klasse, die alle Inhalte doppelt so groß macht. Bei einem Wechsel des Bildschirms wird der Klassenname gelöscht. Um den Effekt des Fallens zu erzielen, werden alle Animationen innerhalb von 1,5 Sekunden abgeschlossen.

7. Die Linien in den drei Bildschirmen weisen Umdrehung und Rotation auf. Die Umdrehung erfolgt um den Mittelpunkt Q, die Rotation ○ um die Y-Achse.

Wirkung der Operation

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung von QQ-Browserfunktionen mit CSS. Weitere relevante CSS-QQ-Browserinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!