Detaillierte Erklärung der CSS3-Animation und der neuen Funktionen von HTML5

Detaillierte Erklärung der CSS3-Animation und der neuen Funktionen von HTML5

1. CSS3-Animation

☺CSS3-Animationen sind viel einfacher und funktionieren besser als das dynamische Ändern von Elementstilen über JavaScript. Es gibt drei Animationseigenschaften in CSS3: transform , transition und animation .
1. Transform
transform wird hauptsächlich verwendet, um die Form von Elementen zu ändern: rotate , scale , skew , translate und matrix .
Beispiel:

.transform-klasse {
    transformieren: drehen (30 Grad) skalieren (2,3);
}

1.1. Basispunkt des Transform-Origin. Alle Transformationen basieren auf dem Basispunkt, der standardmäßig dem Mittelpunkt des Elements entspricht. Verwendung: transform-origin:(x,y) , X, Y können Prozentwerte, px, rem oder links, rechts, Mitte (X) und oben, Mitte, unten (Y) sein.
Beispiel:

.transform-klasse {
    transform-origin: (links, unten);
}

1.2. rotate dreht das Element um den angegebenen Winkel. Handelt es sich um eine positive Zahl, erfolgt die Drehung im Uhrzeigersinn, bei einer negativen Zahl gegen den Uhrzeigersinn.
Beispiel:

.transform-rotate {
    transformieren: drehen (30 Grad);
}

1.3. Maßstab
Es gibt drei Möglichkeiten, scale zu verwenden: scale(x,y) , scaleX(x) und scale(Y) . Ist der Zoomfaktor größer als 1 wird vergrößert, ist er gleich 1 wird die Originalgröße wiedergegeben und ist er kleiner als 1 wird verkleinert.
Beispiel:

.transform-scale {
    transformieren: Skalierung(2,1,5);
}

.transform-scaleX {
    transformieren: scaleX(2);
}

.transform-scaleY {
    transformieren: scaleY(1,5);
}

1.4. Übersetzen
Es gibt drei Fälle translate : translate(x,y) , translateX(x) , translateY(y) .“
Beispiel:

.transform-translate {
    transformieren: übersetzen (400px, 20px);
}

.transform-translateX {
    transformieren: übersetzenX(300px);
}

.transform-translateY {
    transformieren: übersetzenY(20px);
}

1.5. Schrägverzerrung
Es gibt drei Möglichkeiten, skew zu schreiben: skew(xdeg,ydeg) , skewX(xdeg) , skewY(ydeg) , wobei die Einheit Grad der Winkel ist.
Beispiel:

.transform-skew {
    Transformation: Schrägstellung (30 Grad, 10 Grad);
}

.transform-skewX {
    Transformation: schrägX(30 Grad);
}

.transform-skewY {
    transformieren: schrägY(10 Grad);
}

1.6, Matrix
Kurze Matrixdetails
2. Übergang
transition legen Sie fest, wie ein Element reibungslos von einem Zustand in einen anderen übergeht:

  • transition-property
  • transition-duration
  • transition-timing-function (Übergangsrate)
  • transition-delay

3. Animationen
animation ähnelt der Einzelbildanimation in Flash und ist, genau wie die Wiedergabe eines Films, sehr feinfühlig und flexibel. Ein Übergang gibt lediglich einen Start- und Endzustand an. Einzelbildanimationen bestehen aus Keyframes. Die kontinuierliche Wiedergabe vieler Keyframes ergibt eine Animation. In CSS3 wird das Keyframes-Attribut verwendet, um Einzelbildanimationen abzuschließen.
@Schlüsselbilder

  • animationName: Name der Animation (geben Sie ihm einen eigenen Namen)
  • Prozentsatz: Prozentwert [pəˈsentɪdʒ]
  • Eigenschaften: Name der Stileigenschaft (Farbe, links usw.)

Beispiel:

@keyframes Animationsname {
   aus {
       Eigenschaften: Wert;
   }
   Prozentsatz
       Eigenschaften: Wert;
   }
   Zu {
       Eigenschaften: Wert;
   }
}
//oder
@keyframes Animationsname {
   0% {
       Eigenschaften: Wert;
   }
   Prozentsatz
       Eigenschaften: Wert;
   }
   100 % {
       Eigenschaften: Wert;
   }
}

2. Neue Funktionen von H5

  1. Wird zum Zeichnen von Canvas-Elementen verwendet.
  2. Video- und Audioelemente für die Medienwiedergabe.
  3. Der lokale Offline-Speicher in localStorage speichert Daten für lange Zeit und die Daten gehen nach dem Schließen des Browsers nicht verloren; die Daten in sessionStorage werden nach dem Schließen des Browsers automatisch gelöscht.
  4. (新標簽) Bessere semantische Inhaltselemente

Bildbeschreibung hier einfügen

Formularsteuerelemente: Kalender, Datum, Uhrzeit, E-Mail, URL, Suche.

(選擇器)

Bildbeschreibung hier einfügen
Bildbeschreibung hier einfügen

Dies ist das Ende dieses Artikels über CSS3-Animation und neue HTML5-Funktionen. Weitere relevante Inhalte zu CSS3-Animation und neuen HTML5-Funktionen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Schleifenmethoden und verschiedene Durchlaufmethoden in js

>>:  Beispielcode zur Implementierung der Bereitstellung mehrerer Anwendungen mit Tomcat+Nginx

Artikel empfehlen

Über die praktische Anwendung von HTML-Mailto (E-Mail) sprechen

Wie wir alle wissen, ist „mailto“ ein sehr praktis...

Verwenden von CSS3 zum Implementieren eines Schriftfarbverlaufs

Beim Verwenden von Animation.css habe ich festges...

Kleines Programm zur Implementierung eines einfachen Taschenrechners

In diesem Artikelbeispiel wird der spezifische Co...

js realisiert die Lupenfunktion der Shopping-Website

In diesem Artikel wird der spezifische Code von j...

So installieren und konfigurieren Sie MySQL 5.7.19 unter CentOS 6.5

Die detaillierten Schritte zur Installation von m...

Einführung in die Verwendung des offiziellen MySQL-Leistungstesttools mysqlslap

Inhaltsverzeichnis Einführung Anweisungen Tatsäch...

JavaScript zum Erzielen eines dynamischen Tabelleneffekts

In diesem Artikel wird der spezifische Code für J...