Heim > Web-Frontend > HTML-Tutorial > Stop-Motion-Animation

Stop-Motion-Animation

WBOY
Freigeben: 2016-09-01 00:01:02
Original
1682 Leute haben es durchsucht

Stop-Motion-Animation

Berühre ihn mit der Maus und er kann sich nicht bewegen! !

Dies ist eine Stop-Motion-Animation, es werden nur Keyframes abgespielt. Genau wie bei den alten Filmen in der Vergangenheit gibt es nur einen Film, und dann fällt das Licht auf den Film und der Film wird bewegt, und es entsteht das Gefühl einer Animation.

Fragen Sie mich nicht, warum das Layout so hässlich ist

Die verwendeten Schlüsselwörter sind „steps()“ und „sprite“

Zum Beispiel:
<span style="color: #800000;">element{<br>  background: url() no-repeat; //the-source-of-picture<br>  animation: spirit-animation 4s steps(9);<br>}<br>@keyframes{<br>  from{<br>    background-position: ;//the-start-of-picture<br>  }<br>  to{<br>    background-position: ;//the-end-of-picture<br>  }<br>}</span>
Nach dem Login kopieren

Diese Animation spielt den ersten Keyframe und die folgenden 9 Keyframes in 4 Sekunden ab.

Lassen Sie uns über Schlüsselbilder sprechen. Wenn Sie League of Legends (LOL) spielen und die Konfiguration Ihrer Computergrafikkarte veraltet ist, beschweren Sie sich möglicherweise darüber, dass Sie eine verdammte Diashow zeigen. Jede Folie ist ein Schlüsselbild. Wenn die Zahl innerhalb eines bestimmten Zeitraums groß genug ist, werden Sie nicht das Gefühl haben, dass es sich um eine Diashow handelt (die Verweildauer des Lichts im menschlichen Auge beträgt xx Sekunden, und wenn das nächste Licht in das Auge eintritt, bleibt es beim vorherigen Strahl, du wirst es nicht spüren) Steckengeblieben und stehengeblieben).

Die Animation, die wir normalerweise verwenden, ist standardmäßig auf Tween-Animation eingestellt.

Die Frage ist: Was ist Tween-Animation? Hier muss ich mich bei den Substantivexperten beschweren. Es gibt viele abgekürzte Substantive, die ich überhaupt nicht heraussuchen kann.

Tween-Animation, englische Tween-Animation, Formanimation, fließende Übergänge vom vorherigen Bild zum nächsten Bild, wobei ich das Bild jederzeit aufnehmen kann. Mit Schlüsselbildern geht das nicht. Er hat nur so viele Bilder, die er eingestellt hat.

Was ist mit den Elfen?

Eine Sammlung von Aktionen für ein Objekt.

Das ist alles.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage