Einführung in verwandte Eigenschaften von CSS, um dynamische Effekte von Bildern zu erzielen

CSS realisiert den dynamischen Effekt von Bild.

Verwendungsmethode Hover verwendenPseudoklasse

Betriebsprozess Bestimmen Sie zunächst den zu erzielenden Effekt und legen Sie die anfängliche Darstellung festZustand

Cssin Animationen verwendete Eigenschaften

Übergangseigenschaft

transition-property gibt die CSS-Eigenschaften zum Festlegen des Übergangs an Effekt Name.

(

none Keine Eigenschaften erhalten den Übergangseffekt.

alle Alle Eigenschaften erhalten den Übergangseffekt.

Eigenschaft definition Liste der CSS-Eigenschaftsnamen zum Anwenden des Übergangseffekts, getrennt durch Kommas

)

transition-duration gibt an, wie viele Sekunden oder Millisekunden es dauert, bis der Übergangseffekt abgeschlossen ist.

transition-timing-function gibt den Geschwindigkeitsverlauf des Geschwindigkeitseffekts an.

(

linear gibt einen Übergangseffekt an, der mit der gleichen Geschwindigkeit beginnt und endet (entspricht Kubikbezier(0,0,1,1)).

ease Gibt eine langsame Geschwindigkeit an. Ein Übergangseffekt, der beginnt, dann schnell wird und dann langsam endet (cubic-bezier(0.25,0.1,0.25,1))

ease-in gibt einen Übergangseffekt an, der langsam beginnt Geschwindigkeit (entspricht Kubikbezier (0,42,0,1,1)). 0,58,1)). n,n,n,n). Definieren Sie Ihren eigenen Wert in der Kubik-Bezier-Funktion

. Mögliche Werte sind Werte zwischen 0 und 1.

)

transition-delay definiert, wann der Übergangseffekt beginnt. Das Attribut

transfor

m wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

translateX(x) definiert eine Transformation, die nur den Wert der X-Achse verwendet.

translateY(y) definiert die Transformation, indem einfach der Y-Achsenwert verwendet wird.

scale(x,y) definiert eine 2D-Skalierungstransformation.

scaleX(x) Definiert eine Skalierungstransformation durch Festlegen des Werts der X-Achse.

scaleY(y) Definiert die Skalierungstransformation durch Festlegen des Werts der Y-Achse.

rotate3d(x,y,z,angle) definiert die 3D-Rotation.

rotateX(angle) definiert die 3D-Rotation entlang der der Achse

rotate(angle) definiert die 2D-Rotation und gibt den Winkel im Parameter an. Legen Sie transform-origin (Rotationsmittelpunkt)

skew(x-angle,y-angle) fest, um eine 2D-Skew-Transformation entlang der X- und Y-Achse zu definieren.

skewX(angle) definiert eine 2D-Skew-Transformation entlang der X-Achse.

skewY(angle) definiert die 2D-Skew-Transformation entlang der Y-Achse.

Das obige ist der detaillierte Inhalt vonEinführung in verwandte Eigenschaften von CSS, um dynamische Effekte von Bildern zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!