CSS3 verwendet Animationsattribute, um coole Effekte zu erzielen (empfohlen)
|
animation-name Animationsname, kann mehrere Werte haben, getrennt durch Kommas, was darauf hinweist, dass mehrere Animationen gebunden sind Die Eigenschaft „Animation-Name“ weist der Animation einen Namen zu. animation-name ist mit gängigen Browsern kompatibel, muss aber aus Kompatibilitätsgründen immer noch mit einem Präfix versehen werden Animationsname hat zwei Eigenschaftswerte: Keyframename und None.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
Körper{
Rand: 0 automatisch;
Hintergrund:#abcdef;
}
div{
Breite: 800px;
Höhe: 800px;
Rand: 0 automatisch;
}
.Container{
Position: relativ;
}
.inner, .middle, .outer, .pic{
Position: absolut;
oben: 0;
rechts:0;
unten: 0;
links: 0;
Rand: automatisch;
}
.innere{
Hintergrund: URL (Quelle/Kreis_inner.jpg) Mitte, keine Wiederholung;
Animationsname: innerer Kreis;
}
.Mitte{
Hintergrund: URL (Quelle/Kreis_Mitte.jpg) Mitte, keine Wiederholung;
Animationsname: Kreismitte;
}
.äußere{
Hintergrund: URL (Quelle/Kreis_außen.jpg) Mitte, keine Wiederholung;
Animationsname: äußerer Kreis;
}
.Bild{
Hintergrund: URL (Quelle/Bild.jpg) Mitte, keine Wiederholung;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="inner"></div>
<div Klasse="Mitte"></div>
<div Klasse="äußere"></div>
<div Klasse="Bild"></div>
</div>
</body>
</html>animation-duration Die Animationsdauer beträgt standardmäßig 0 Animations-Timing-Funktion Animations-Timing-Funktion Animationsverzögerung Animationsverzögerungszeit Die Eigenschaft „animation-delay“ definiert, wann die Animation startet. Die Einheit kann Sekunden (s) oder Millisekunden (ms) sein. Negative Werte sind zulässig. Bei „-2s“ startet die Animation sofort, es werden jedoch 2 Sekunden in der Animation übersprungen. animation-iteration-count Anzahl der Animationsschleifen animation-iteration-count: Zahl | unendlich Standard ist 1 Animationsrichtung: normal | rückwärts | alternativ | alternativ-umgekehrt Alternate und Alternate-Reverse werden, wenn der Animation-Iteration-Count nicht auf unendlich gesetzt ist, nur einmal ausgeführt und dann gestoppt. Animationsfüllmodus: Die Animation wird nicht verzögert ausgeführt oder der Pausenzustand wird nach Abschluss der Animation angezeigt (die Animation kann nicht auf Schleife eingestellt werden, da sie sonst nicht gestoppt werden kann). Animationsfüllmodus: keiner | vorwärts | rückwärts | beides Kein Endzustand Startzustand ist situationsabhängig Animationswiedergabestatus: läuft | pausiert Animationswiedergabestatus: läuft | pausiert Animationskurzschrift Animation: Name Dauer Zeitfunktion Verzögerung Iterationsanzahl Richtung Füllmodus Wiedergabestatus
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
Körper{
Rand: 0 automatisch;
Hintergrund:#abcdef;
}
div{
Breite: 800px;
Höhe: 800px;
Rand: 0 automatisch;
}
.Container{
Position: relativ;
-webkit-transform-style:3d beibehalten;
-moz-transform-style:3d beibehalten;
-ms-transform-style:3d beibehalten;
-o-Transformationsstil: 3D beibehalten;
Transformationsstil: 3D beibehalten;
}
.inner, .middle, .outer, .pic{
Position: absolut;
oben: 0;
rechts:0;
unten: 0;
links: 0;
Rand: automatisch;
}
.container:hover div{
-webkit-animation-play-state:pausiert;
-moz-animation-play-state:pausiert;
-ms-animation-play-state:pausiert;
-o-animation-play-state:pausiert;
Animations-Wiedergabestatus: pausiert;
}
.innere{
Hintergrund: URL (Quelle/Kreis_inner.jpg) Mitte, keine Wiederholung;
/*Zyklus*/
-webkit-animation:circle_inner 10 s Ein- und Ausfahren, 1 s unendliches abwechselndes Laufen;
-moz-animation:circle_inner 10 s Ein- und Ausfahren, 1 s unendlicher abwechselnder Betrieb;
-ms-animation:circle_inner 10 s Ein- und Ausfahren, 1 s unendlicher abwechselnder Betrieb;
-o-animation:circle_inner 10 s Ein- und Ausfahren, 1 s unendliches abwechselndes Laufen;
Animation: innerer Kreis, 10 s, Ein- und Ausfahren, 1 s unendlicher abwechselnder Lauf;
/*Keine Schleife, Fülleffekt*/
/*-webkit-animation:circle_inner 10 s Ein- und Aussteigen, 1 s Vorwärtslaufen;
-moz-animation:circle_inner 10 s leichtes Ein- und Auslaufen, 1 s vorwärts laufen;
-ms-animation:circle_inner 10 s Ein- und Ausfahren, 1 s Vorwärtslaufen;
-o-animation:circle_inner 10 s Ein- und Ausfahren, 1 s Vorwärtslaufen;
Animation:Kreis_innen 10 s Ein- und Ausfahren 1 s Vorwärtslaufen;*/
}
.Mitte{
Hintergrund: URL (Quelle/Kreis_Mitte.jpg) Mitte, keine Wiederholung;
-webkit-animation:circle_middle 10 s Ein- und Ausfahren, 1 s unendliches abwechselndes Laufen;
-moz-animation:circle_middle 10 s Ein- und Ausstieg, 1 s unendlicher abwechselnder Lauf;
-ms-animation:circle_middle 10 s Ein- und Ausfahren, 1 s unendlicher abwechselnder Betrieb;
-o-animation:circle_middle 10 s Ein- und Ausfahren, 1 s unendliches abwechselndes Laufen;
Animation: Kreismitte, 10 s, Ein- und Ausfahren, 1 s unendlicher abwechselnder Lauf;
}
.äußere{
Hintergrund: URL (Quelle/Kreis_außen.jpg) Mitte, keine Wiederholung;
-webkit-animation:circle_outer 10 s Ein- und Ausfahren, 1 s unendlicher abwechselnder Betrieb;
-moz-animation:circle_outer 10 s Ein- und Ausstieg, 1 s unendlicher abwechselnder Betrieb;
-ms-animation:circle_outer 10s ease-in-out 1s unendlicher abwechselnder Betrieb;
-o-animation:circle_outer 10 s Ein- und Ausfahren, 1 s unendlicher abwechselnder Lauf;
Animation: äußerer Kreis, 10 s, Ein- und Ausfahren, 1 s, unendlicher abwechselnder Lauf;
}
.Bild{
Hintergrund: URL (Quelle/Bild.jpg) Mitte, keine Wiederholung;
}
@keyframes kreis_inner{
0 % { transform:rotateX(0 Grad); }
50 % { transform:rotateX(90 Grad); }
100 % { transform:rotateX(360 Grad); }
}
@keyframes Kreis_Mitte{
0 % { transform:rotateY(0 Grad); }
50 % { transform:rotateY(90 Grad); }
100 % { transform:rotateY(360 Grad); }
}
@keyframes kreis_außen{
0 % { transform: drehenZ(0 Grad); }
50 % { transform:rotateZ(90 Grad); }
100 % { transform:rotateZ(360 Grad); }
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="inner"></div>
<div Klasse="Mitte"></div>
<div Klasse="äußere"></div>
<div Klasse="Bild"></div>
</div>
</body>
</html>
Optimierung der Animationsleistung: Verwenden Sie „position-fixed“ anstelle von „background-attachment“ Elemente mit Bildern werden in Pseudoelementen platziert wird sich ändern Die Kompatibilität mit IE13+ kann ich wohl aufgeben ... Abwärtspfeil-Effekt
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
Körper{
Rand: 0 automatisch;
Hintergrund:#abcdef;
}
div{
Breite: 30px;
Höhe: 30px;
Position: fest;
links: 0;
rechts:0;
unten: 100px;
Rand: 0 automatisch;
Cursor:Zeiger;
-webkit-transform:drehen(90 Grad);
-moz-transform:drehen(90°);
-ms-transform:drehen(90Grad);
-o-transform:drehen(90°);
transformieren: drehen (90 Grad);
-webkit-animation:upDown 2s, unendlich ein- und aussteigen;
-moz-animation:upDown 2s, unendliches Ein- und Aussteigen;
-ms-animation:upDown 2s, unendliches Ein- und Ausfahren;
-o-Animation:upDown 2s, unendliches Ein- und Aussteigen;
Animation: Auf/Ab, 2 s, unendliches Ein- und Aussteigen;
}
@-webkit-keyframes hoch/runter{
0 % { unten: 100px; }
50 % { bottom:80px; }
100 % { unten: 100px; }
}
@-moz-keyframes hoch/runter{
0 % { unten: 100px; }
50 % { bottom:80px; }
100 % { unten: 100px; }
}
@-ms-keyframes hoch/runter{
0 % { unten: 100px; }
50 % { bottom:80px; }
100 % { unten: 100px; }
}
@-o-keyframes hoch/runter{
0 % { unten: 100px; }
50 % { bottom:80px; }
100 % { unten: 100px; }
}
@keyframes hoch/runter{
0 % { unten: 100px; }
50 % { bottom:80px; }
100 % { unten: 100px; }
}
</Stil>
</Kopf>
<Text>
<div>></div>
</body>
</html>
Zusammenfassen Oben habe ich Ihnen erklärt, wie Sie mit dem Animationsattribut in CSS3 coole Effekte erzielen können. Ich hoffe, es wird Ihnen helfen! |
<<: Grundlegendes Verständnis und Verwendung der HTML-Auswahloption
>>: Mysql implementiert Master-Slave-Konfiguration und Multi-Master-Multi-Slave-Konfiguration
Artikel empfehlen
Detaillierte Konfiguration von Nginx, das sowohl Http als auch Https unterstützt
Heutzutage gehört die Unterstützung von HTTPS für...
Detaillierte Erläuterung der zu beachtenden Punkte bei HTML-Standards, die den W3C-Standards entsprechen
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
JavaScript Canvas Tetris-Spiel
Tetris ist ein sehr klassisches kleines Spiel, un...
Detaillierte Erläuterung der Wissenspunkte der Linux-DMA-Schnittstelle
1. Zwei Arten der DMA-Zuordnung 1.1. Konsistente ...
Vue+el-table realisiert das Zusammenführen von Zellen
In diesem Artikelbeispiel wird der spezifische Co...
Beispieloperation für die Summe des Mysql-Varchar-Typs
Einige Freunde haben beim Erlernen von Datenbanke...
Ein Artikel, der Ihnen hilft, die Vererbung und Prototypenkette von JS zu verstehen
Inhaltsverzeichnis Vererbung und Prototypenkette ...
JS implementiert Click-Drop-Effekt
js realisiert den Spezialeffekt des Klickens und ...
Lösung für das Problem, dass Java keine Verbindung zu MySQL 8.0 herstellen kann
In diesem Artikel finden Sie eine Sammlung von Ja...
So übermitteln Sie den Wert eines deaktivierten Formularfelds in einem Formular Beispielcode
Wenn ein Formularfeld in einem Formular deaktivier...
SQL-Abfrage für Benutzer, die sich an mindestens n aufeinanderfolgenden Tagen angemeldet haben
Nehmen Sie als Beispiel drei aufeinanderfolgende ...
Unsere Gedanken zur Karriere als UI-Ingenieur
Ich bin seit langer Zeit depressiv, warum? Vor ein...
Tutorial-Diagramm zur Installation von TomCat unter Windows 10
Installieren Sie TomCat unter Windows Dieser Arti...
Tutorial zu HTML-Tabellen-Tags (13): Regeln für interne Rahmenstilattribute
Mit REGELN kann die Art der inneren Rahmen der Ta...
Zusammenfassung der MySQL-Nutzungsspezifikationen
1. Es muss die InnoDB-Speicher-Engine verwendet w...