CSS offset Eigenschaft

Definition und Verwendung

offset Das Attribut wird verwendet, um Elemente entlang eines Pfades zu animieren und ist eine Kurzschreibform der folgenden Attribute:

Über die Einstellung offset Verschiedene Arten der Attributwerte, siehe weitere Beispiele unten.

Verwendung offset Kurzschreibweise für die Einstellung der Attributwerte offset-path, offset-distance und offset-rotate für das <img>-Element:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

Verwenden Sie die <img>-Elemente offset Eigenschaftseinstellungen der Attributwerte offset-path und offset-rotate:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

Verwenden Sie die <img>-Elemente offset Eigenschaftseinstellungen der Attributwerte offset-path und offset-distance:

img {
  offset: Pfad('M 50 80 C 150 -20 250 180 350 80') 150px;
}

Verwenden Sie die <img>-Elemente offset Eigenschaftswerte für die Attribute offset-path, offset-distance, offset-rotate und offset-anchor setzen:

img {
  offset: Pfad('M 50 80 C 150 -20 250 180 350 80') 150px -90grad / 0% 50%;
}

offset: auto|value|initial|inherit;

Wert	Beschreibung
auto	Standard. Siehe die Standardwerte für jede einzelne 'offset-' Eigenschaft.
offset-anchor	Gibt den Punkt auf dem Element an, der während der Animation auf dem Pfad fixiert bleibt. Standardwert ist auto.
offset-distance	Gibt die Entfernung vom Anfangspunkt des Pfades an, den offset-path definiert. Standardwert ist 0.
offset-path	Gibt den Pfad an, entlang dessen das Element animiert wird. Standardwert ist none.
offset-position	Gibt die Initialposition des Elements entlang eines Pfades an. Standardwert ist normal.
offset-rotate	Gibt den Drehwinkel an, um den Element entlang eines Pfades zu animieren. Standardwert ist auto.
initial	Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit	Diese Eigenschaft von ihrem übergeordneten Element erben. Siehe inherit.

Standardwert:	Siehe den Standardwert für die einzelnen Eigenschaften
Vererbbarkeit:	Nein
Animationserstellung:	Unterstützt. Siehe:Animationsspezifische Attribute.
Version:	CSS3
JavaScript-Syntax:	object.style.offset="Pfad('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90grad"

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome	Edge	Firefox	Safari	Opera
55	79	72	16	42