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

Eine kurze Diskussion zum CSS-Höhenkollapsproblem

Leistung Zum Beispiel: HTML: <div Klasse="...

Das Erlebnis gestalten: Was auf dem Knopf liegt

<br />Vor Kurzem hat UCDChina eine Artikelse...

4 Lösungen für MySQL-Import-CSV-Fehler

Dies soll an die 4 Fallstricke erinnern, in die i...

Detaillierte Erklärung zur Verwendung des Schlüsselworts ESCAPE in MySQL

MySQL-Escape Escape bedeutet die ursprüngliche Se...

Implementierung des iview-Berechtigungsmanagements

Inhaltsverzeichnis iview-admin2.0 integrierte Ber...

Vue-Konfigurationsdetails für mehrere Seiten

Inhaltsverzeichnis 1. Der Unterschied zwischen me...

So verwenden Sie den Linux-Befehl tr

01. Befehlsübersicht Der Befehl tr kann Zeichen a...

Beispiel für eine erzwungene Konvertierungsmethode für MySQL-Zeichenfolgen

Vorwort Da die Typen derselben Felder in den beid...

Confluence mit Docker bereitstellen

1. Umweltanforderungen 1. Docker 17 und höher wur...

Die Bilder in HTML werden direkt durch base64-kodierte Strings ersetzt

Kürzlich stieß ich auf eine Webseite, die zwar Bil...

Detaillierte Erklärung der Verwendung des Linux-Befehls lsof

lsof (List Open Files) ist ein Tool zum Anzeigen ...

Freundliche Alternativen zum Find Tool in Linux

Mit dem Befehl „Find“ können Sie in einem angegeb...