So einrichten

Die HTML -Sprache bietet die Struktur der Webseite, und CSS bietet das Design und die Formatierung dieser Anwendung. Mit dieser Kombination können Sie auch Animation hinzufügen, da die animierten Elemente im Vergleich zu statischen Elementen attraktiver aussehen. Es lässt ein Element auch seinen Stil allmählich ändern.

In diesem Artikel leitet wir, wie wir Animation auf die Elemente anwenden können. Also beginnen wir beginnen!

Was sind CSS -Animation Keyframes?

Um die Animation zu erledigen, müssen wir die Animation an das HTML -Element binden. Verwenden Sie zu diesem Zweck das Schlüsselwort “@keyframes”Gefolgt vom Animationsnamen. Diese Komponente gibt den Start und Ende der Animation an.

So einrichten?

Um Animationsschlüsselframes in CSS einzurichten, werden wir zwei Beispiele durchlaufen.

Beispiel 1

Führen Sie die folgenden Schritte aus: Führen Sie die folgenden Schritte aus:

• • Fügen Sie einen Klassennamen hinzu "Main-div”.
  • Fügen Sie im Div eine weitere DIV mit dem Klassennamen hinzu “Img-Peng”.
  • In diesem IMG-Peng Div platzieren Sie das Bild platzieren. Dieses Tag hat drei Attribute, die “src"Attribut, um den Bildpfad bereitzustellen"AltIst der alternative Text, der hinzugefügt wird, wenn das Bild nicht angezeigt wird, und der “Breite”Attribut, um die Breite des Bildes bereitzustellen.

Html

CSS

.Main-div
Breite: 90%;
Höhe: 90px;
Hintergrundfarbe: RGB (67, 66, 87);
Rand: 20px Auto;
Polsterung: 10px;

In CSS, die “.Main-div”Wird hinzugefügt, um auf die Div -Klasse zuzugreifen. Die darauf angewendeten Eigenschaften werden nachstehend erläutert:

• • “BreiteDer Eigenschaftswert definiert die Breite des Divs.
  • “HöheDie Eigenschaft wird verwendet, um die Größe des DIV festzulegen.
  • “HintergrundfarbeEigenschaft wendet Farbe auf den Hintergrund des Elements an.
  • “Rand”Wird als" eingestellt "20px Auto”, Der den Raum von oben und unten angibt, und automatisch bedeutet der gleiche Platz von links und rechts.
  • “PolsterungDer Eigenschaftswert wird als 10px zugewiesen, wodurch der Platz um den Inhalt des Elements angewendet wird.

Stil img-peng Klasse

.img-peng
Breite: 50px;
Höhe: 100px;
Position: Relativ;
Animation: Shake;
Animationsdauer: 2s;
Animations-Timing-Funktion: 2s;
Animationsveranstalter: Infinite;

Der ".Img-Peng”Wird verwendet, um auf die Div -Klasse zuzugreifen, die in der obigen HTML -Datei erwähnt wird. Dieses DIV -Element wird mit Eigenschaften gestaltet, die unten diskutiert werden:

• • “BreiteDer Eigenschaftswert wird verwendet, um die Breite des Elements festzulegen.
  • “HöheDer Eigenschaftswert wird verwendet, um die Höhe des Elements festzulegen.
  • “Position"Eigenschaft wird der Wert zugewiesen"relativ”, Was bedeutet, dass es relativ zu seiner normalen Position positioniert wird.
  • “Animation"Name wird als" angegeben "Shake”. Sie können jedoch Animation gemäß den Anforderungen benennen.
  • “Animationsdauer”Repräsentiert die Dauer der Animation, die 2 Sekunden beträgt.
  • “Animations-Timing-Funktion”Den Wert von 2s zugewiesen wird, was bedeutet, dass in 2 Sekunden die Animation abgeschlossen ist.
  • “Animationsveranstalter”Wird als unendlich eingestellt, was bedeutet, dass diese Animation in unendlicher Zeit auftritt.

Definieren Sie @KeyFrames mit und nach Schlüsselwörtern

@keyframes schütteln
aus
Top: 50px;

Zu
Margin-Bottom: 200px;

Die Beschreibung der Keyframes der Animation, die auf das Bild eingestellt ist, ist unten aufgeführt:

• • “@keyframes schütteln”Bezieht sich auf den Animationsnamen Shake, gefolgt von dem Schlüsselwort @KeyFrames. Innerhalb dieser Regel wird das Verhalten der Animation angegeben.
  • In seinen lockigen Klammern die “aus" Und "ZuSchlüsselwörter geben unterschiedliche Intervalle an, um das Animationsverhalten zu definieren.
  • Der "SpitzeDie Eigenschaft wird dem Wert von 50px zugewiesen, was bedeutet.

Infolgedessen sehen Sie die folgende Ausgabe:

Lassen Sie sich nun die Animation in verschiedenen Intervallen anders verhalten. Verwenden Sie dazu die Animationsprozentsätze in den @KeyFrames.

Geben Sie @KeyFrames mit Prozentsätzen an

@keyframes schütteln
0%
links: -50px;

25%
links: 50px;

50%
links: -25px;

75%
links: 25px;

100%
links: 10px;

Die Beschreibung des oben genannten Code -Snippets wird hier also erwähnt:

• • Die Prozentwerte 0%, 25%, 50%, 75%und 100%repräsentieren die Animation in unterschiedlichen Intervallen.
  • Darüber hinaus wird der Raum links vom Bild bei 0%sein “-50px”. Bei 25%wird der Raum links sein “50px”. Bei 50%wird der Raum links sein “-25px”. Bei 75%wird der linke Raum sein “25px"Und wenn die Animation abgeschlossen ist (100%), wird der linke Raum" sein "10px”.

Der obige Code zeigt die folgende Animation an:

Nehmen wir ein weiteres Beispiel, um zu sehen, wie wir Animationen auf die Bilder setzen können.

Beispiel 2

Fügen Sie in HTML einen Namen mit dem Klassennamen hinzu “Hauptseite”. Platzieren Sie in diesem Element zwei weitere Div -Tags mit Klassen “Cloud1" Und "Cloud2", bzw.

Html

CSS

Körper
Rand: 0;
Polsterung: 0;

In CSS werden wir dem Körperelement die folgenden CSS -Eigenschaften zuweisen:

• • “Rand”Eigenschaft als 0 gibt keinen Platz um das Element an.
  • “PolsterungEigenschaft mit dem Wert 0 gibt keinen Platz um den Inhalt des Elements an.

Style Main Page Div

.Hauptseite
Hintergrundbild: URL (/Images/Wolf-Nacht.png);
Hintergrundrepeat: No-Repeat;
Hintergrundgröße: Cover;
Höhe: 100VH;
Position: Relativ;
Überlauf versteckt;

Hier:

• • “.Hauptseite”Wird verwendet, um auf die Div -Klasse zuzugreifen.
  • “Hintergrundbild"Eigenschaft wird der Wert zugewiesen"URL (/Images/Wolf-Nacht.png)Wobei Bilder der Ordner sind, der das Bild Wolf-Nacht enthält.png.
  • “Hintergrund Wiederholung"Eigenschaft wird der Wert zugewiesen"No-Repeat, Das heißt, das Bild wird einmal angezeigt.
  • “Hintergrundgröße”Wird als" eingestellt "Abdeckung”Um das gesamte DIV -Element zu füllen.
  • “Höhe”IS 100VH, was 100% der Größe des Ansichtsfenpfes entspricht.
  • “Position”Da relativ die Bildposition relativ zu seinem aktuellen Standort festgelegt wird.
  • “ÜberlaufDer Wert der Eigenschaft wird als versteckt eingestellt, um den Teil des Bildes zu verbergen, der zu groß ist, um in den Container zu passen.

Style Cloud1 -Klasse

.Cloud1
Hintergrundbild: URL (/Bilder/Cloud.png);
Hintergrundgröße: enthalten;
Hintergrundrepeat: No-Repeat;
Position: absolut;
Oben: 100px;
Breite: 500px;
Höhe: 300px;
Animation: Cloudanimation1;
Animationsdauer: 70er Jahre;
Animationsveranstalter: Infinite;

Die Div -Klasse Cloud1 wird mit den folgenden erklärten Eigenschaften angewendet:

• • “.Cloud1”Wird verwendet, um auf die Div -Klasse Cloud1 zuzugreifen.
  • “Hintergrundbild”Eigenschaft wird als URL festgelegt (/Bilder/Cloud.PNG), wobei Bilder der Ordner sind, der die Bildwolke enthält.png.
  • “Hintergrundgröße"Mit dem Wert"enthalten”Sorgt für die Sichtbarkeit des Bildes.
  • “Hintergrund Wiederholung”Eigenschaft mit dem Wert als"No-Repeat”Zeigt das Bild als nicht wiederholt an.
  • “Position”Als absolute positioniert das Bild relativ zum Element seines Elternteils.
  • “SpitzeDie Eigenschaft legt das Bild von oben auf 100px fest.
  • “BreiteDie Eigenschaft wird verwendet, um die Breite des DIV -Elements auf 500px festzulegen.
  • “HöheDie Eigenschaft wird verwendet, um die Höhe des DIV -Elements auf 300px festzulegen.
  • “Animation”Wird der Name Cloudanimation1 zugewiesen1.
  • “Animationsdauer”Repräsentiert die Dauer der Animation, die 70 Sekunden beträgt.
  • “Animationsveranstalter”Wird der Wert unendlich zugewiesen, der die Animation unendliche Zeiten iteriert.

Bisher haben wir die CSS-Eigenschaften auf die Hauptseite der Div-Klasse und die Cloud1 angewendet. Jetzt, im nächsten Abschnitt, werden wir die nächste Div -Klasse namens Cloud2 stylen.

Style Cloud2 -Klasse

.Cloud2
Hintergrundbild: URL (/Bilder/Cloud.png);
Hintergrundgröße: enthalten;
Hintergrundrepeat: No-Repeat;
Position: absolut;
Top: 50px;
Breite: 200px;
Höhe: 300px;
Animation: Cloudanimation2;
Animationsdauer: 15s;
Animationsveranstalter: Infinite;

Die Div -Klasse Cloud2 wird mit den unten erklärten Eigenschaften angewendet:

• • “.Cloud2”Wird verwendet, um auf die Klasse Cloud2 zuzugreifen.
  • “Hintergrundbild”Eigenschaft wird als URL festgelegt (/Bilder/Cloud.PNG), wobei das Bild ein Ordner ist, der die Bildwolke enthält.png.
  • “Hintergrundgröße”Enthält einen Wert stellt sicher, dass die Sichtbarkeit des Bildes.
  • “Hintergrund Wiederholung”Eigenschaft mit dem als No-Repeat festgelegten Wert Zeigt das Bild als Nicht-Wiederholung an.
  • “Position”Als absolute positioniert das Bild relativ zum Element seines Elternteils.
  • “SpitzeDie Eigenschaft legt das Bild von oben auf 100px fest.
  • “BreiteDie Eigenschaft wird verwendet, um die Breite des DIV -Elements festzulegen.
  • “HöheDie Eigenschaft wird verwendet, um die Höhe des DIV -Elements festzulegen.
  • “Animation”Wird der Name Cloudanimation2 zugewiesen2.
  • “Animationsdauer”Repräsentiert die Dauer der Animation.
  • “Animationsveranstalter”Wird der Wert unendlich zugewiesen, der die Animation unendliche Zeiten iteriert.

Geben Sie @KeyFrames für Cloudanimation1 an1 an

@keyframes cloudanimation1
Zu
links: 0px;

aus
Links: 100%;

Die Cloud1 Div ist mit der unten beschriebenen Animation gebunden:

• • “@KeyFrames Cloudanimation1Der Name der Animation Cloudanimation1 folgt von dem Keyword @KeyFrames, mit dem der Übergang angegeben wird.
  • Das Keyword von @KeyFrames gibt an, wie die Animation von Anfang bis Ende auf den Cloud -Bildern durchgeführt wird.
  • Der "Zu" Und "ausSchlüsselwörter geben an, dass Cloud1 von 100% zum 0px des Bildschirms verschoben wird.

Geben Sie @KeyFrames für Cloudanimation2 an2 an

@keyframes cloudanimation2
0%
Links: 0%;

100%
Links: 100%;

Die DIV -Klasse Cloud2 ist mit der unten erklärten Animation verbunden:

• • “@Keyframes Cloudanimation2„Repräsentiert den Animationsnamen Cloudanimation2, gefolgt von dem Schlüsselwort @KeyFrames, mit dem die Animation angegeben wird.
  • Der "0%" Und "100%„Repräsentieren Sie den Start und Ende der Animation.
  • Bei 0% der Animation würde die Cloud links mit dem Wert von 0% liegen und sich allmählich auf 100% der Breite bewegen.

Ausgang

Das ist cool! Wir haben besprochen, wie wir Animation zu den Elementen mit dem Schlüsselwort @KeyFrames erfolgreich angeben können.

Abschluss

CSS ermöglicht es uns, Stile auf HTML -Elemente anzuwenden. Die Animation in CSS führt Übergänge von einem Stil zum anderen durch. Es besteht aus zwei Komponenten, den Animationsstilen und den Keyframes. Animationsstile repräsentieren unterschiedliche Eigenschaften wie ihren Namen, ihre Animationsdauer, Animationsveranstalter und mehr. Während die Keyframe -Komponente den Beginn und das Ende der Animation definiert. Diese Anleitung wurde über die Einrichtung von Animationsschlüsselfaktoren mit Beispielen ausgearbeitet.