offset-distance

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Dieoffset-distanceCSS Eigenschaft legt einen Punkt entlang einesoffset-path fest, an dem ein Element positioniert werden soll.

Probieren Sie es aus

offset-distance: 0%;

offset-distance: 80%;

offset-distance: 50px;

<section>  <div></div></section>

#example-element {  width: 24px;  height: 24px;  background: #2bc4a2;  offset-path: path("M-70,-40 C-70,70 70,70 70,-40");  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);}/* Provides a reference image of what path the element is following */#default-example {  background-position: calc(50% - 12px) calc(50% + 14px);  background-repeat: no-repeat;  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 -45 150 140" width="150" height="140"><path d="M-70,-40 C-70,70 70,70 70,-40" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>');}

Syntax

css

/* Default value */offset-distance: 0;/* the middle of the offset-path */offset-distance: 50%;/* a fixed length positioned along the path */offset-distance: 40px;/* Global values */offset-distance: inherit;offset-distance: initial;offset-distance: revert;offset-distance: revert-layer;offset-distance: unset;

<length-percentage>

Eine Länge, die angibt, wie weit das Element entlang des Pfades (definiert mitoffset-path) ist.

100% repräsentiert die gesamte Länge des Pfades (wenn deroffset-path als grundlegende Form oderpath() definiert ist).

Formale Definition

Anfangswert	`0`
Anwendbar auf	transformierbare Elemente
Vererbt	Nein
Prozentwerte	beziehen sich auf die Gesamtlänge des Pfads
Berechneter Wert	for`<length>` the absolute value, otherwise a percentage
Animationstyp	Längenangabe,Prozentsatz oder`calc()`;

Formale Syntax

offset-distance =
<length-percentage>

<length-percentage> =
<length>|
<percentage>

Der Bewegungsaspekt im CSS Motion Path ergibt sich typischerweise aus der Animation deroffset-distance Eigenschaft. Wenn Sie ein Element entlang seines gesamten Pfads animieren möchten, definieren Sie seinenoffset-path und richten dann eine Animation ein, die denoffset-distance von0% bis100% durchläuft.

HTML

html

<div></div>

CSS

css

#motion-demo {  offset-path: path("M20,20 C20,100 200,0 200,100");  animation: move 3000ms infinite alternate ease-in-out;  width: 40px;  height: 40px;  background: cyan;}@keyframes move {  0% {    offset-distance: 0%;  }  100% {    offset-distance: 100%;  }}