Nehmen wir zunächst ein einfaches Beispiel, zum Beispiel: @ Schlüssel Frames Hovertreemove { aus { Spitze :30px;} zu {top:130px;} }Animationen können über @keyframes-Regeln erstellt werden. Animationen werden erstellt, indem nach und nach ein Satz von CSS-Stilen in einen anderen umgewandelt wird. Sie können diesen Satz von CSS-Stilen während der Animation mehrmals ändern. Gibt an, wann die Änderung prozentual erfolgt, oder über die Schlüsselwörter „from“ und „to“, die 0 % und 100 % entsprechen. 0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren. Das Folgende ist der Code für die Auf- und Abwärtsbewegung:
Einführung: Das Prinzip Der Trick beim Erstellen von Animationen besteht darin, eine Reihe von CSS-Stilen zu kombinieren und sie nach und nach in eine andere Reihe von Stilen umzuwandeln. Sie können diesen Satz von CSS-Stilen während der Animation mehrmals ändern. Gibt an, wann die Änderung prozentual erfolgt, oder über die Schlüsselwörter „from“ und „to“, die 0 % und 100 % entsprechen. 0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.
Einführung: In diesem Artikel wird der Code für die Verwendung von reinem CSS3 vorgestellt, um den Animationseffekt eines Kreises zu realisieren, der sich von der Mitte zur Umgebung ausbreitet
[Verwandte Q&A-Empfehlungen]:
Bilder von Huxiu.com verwenden CSS3-Übergang, wie man diesen Effekt erzielt
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Umgebungsdiffusion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
