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
Mysql verwendet gespeicherte Prozeduren, um schnell Millionen von Datenbeispielcodes hinzuzufügen
Vorwort Um den Unterschied zwischen dem Hinzufüge...
Beheben Sie das Problem, dass Docker Run oder Docker Restart beim Starten des Images automatisch beendet werden
Führen Sie den Befehl aus: docker run --name cent...
So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine temporären Dateien erstellt werden können
Problembeschreibung Ich hatte kürzlich ein Proble...
Detaillierte Konfiguration der drahtlosen Netzwerkkarte unter Ubuntu Server
1. Stecken Sie die WLAN-Karte ein und prüfen Sie ...
Eine kurze Diskussion zum CSS-Höhenkollapsproblem
Leistung Zum Beispiel: HTML: <div Klasse="...
JS berechnet die Gewinnwahrscheinlichkeit basierend auf dem Preisgewicht
Inhaltsverzeichnis 1. Beispielszenario 1.1. Legen...
Lernen Sie die gängigen Methoden und Techniken in JS-Arrays und werden Sie ein Meister
Inhaltsverzeichnis splice() Methode join() Method...
Implementierung eines Tomcat-Images, das mit Dockerfile basierend auf Alpine erstellt wurde
1. Laden Sie das Alpenbild herunter [root@docker4...
So verwenden Sie das Videowiedergabe-Plugin DPlayer.js
Das Videoplayer-Plugin DPlayer.js ist einfach zu ...
So verwenden Sie den CocosCreator-Objektpool
Inhaltsverzeichnis Vorwort: Spezifische Operation...
Semantisierung von HTML-Tags (einschließlich H5)
einführen HTML stellt die kontextuelle Struktur u...
Vue implementiert eine einfache Slider-Verifizierung
Dieses Artikelbeispiel zeigt die Implementierung ...
Nginx-Beispielcode zur Implementierung dynamischer und statischer Trennung
In Kombination mit dem Szenario in diesem Artikel...
Beispielcode für CSS, um horizontale Linien auf beiden Seiten des Textes zu erzielen
In diesem Artikel wird der CSS-Beispielcode vorge...
Detaillierte Erklärung dieser Zeigerfunktion in JS
Die Pfeilfunktion ist eine neue Funktion in ES6. ...