CSS offset-distance-Eigenschaft

Die offset-distance-Eigenschaft wird verwendet, um die Position entlang des offset-path anzugeben.

Sie akzeptiert folgende Werte: "length" und "percentages". Der Standardwert ist 0.

INFO

Negative Werte sind gültig.

WARNING

Diese Offset-Eigenschaft ist eine experimentelle Technologie.

In frühen Versionen der Spezifikation wurde diese Eigenschaft als motion-offset bezeichnet.

Anfangswert	0
Anwendbar auf	Transformierbare Elemente.
Vererbbar	Nein.
Animierbar	Ja.
Version	Motion Path Module Level 1
DOM-Syntax	object.style.offsetDistance = "100%";

Syntax

CSS offset-distance-Eigenschaft

css

offset-distance: &lt;length-percentage&gt;;

Beispiel für die offset-distance-Eigenschaft:

Beispiel dargestellt mit Haus und Schere

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 80px;
        height: 80px;
        background: linear-gradient(#eee 50%, #1c87c9 50%);
        position: absolute;
        left: 20%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <div class="mover"></div>
  </body>
</html>

Try it Yourself »

Beispiel für die offset-distance-Eigenschaft in Prozent angegeben:

Beispiel für die CSS offset-distance-Eigenschaft

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .scissorHalf {
        offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
        animation: followpath 4s linear infinite;
      }
      @keyframes followpath {
        to {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <svg class="box" width="700" height="450" viewBox="350 0 1400 900">
      <title>House and Scissors</title>
      <rect x="595" y="423" width="610" height="377" fill="#1c87c9" />
      <polygon points="506,423 900,190 1294,423" fill="#8ebf42" />
      <polygon points="993,245 993,190 1086,190 1086,300" fill="#666" />
      <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />
      <path id="secondScissorHalf" class="scissorHalf" d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" />
    </svg>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung
`<length-percentage>`	Sowohl Länge als auch Prozentangaben geben die Startposition des Offset-Pfads bis zur Endposition an.

initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Was ermöglicht Ihnen die CSS-Eigenschaft 'offset-distance'?

Sie können damit den Farbverlauf für einen linearen Hintergrund festlegen.Sie können damit den Abstand entlang des Pfads definieren, an dem das Element positioniert werden soll.Sie können damit einen Abstand zwischen zwei Elementen festlegen.Sie können damit die Rotation eines Elements festlegen.Sie können damit ein Element entlang eines definierten Pfads platzieren.

CSS offset-distance-Eigenschaft ​

Syntax ​

Beispiel für die offset-distance-Eigenschaft: ​

Beispiel für die offset-distance-Eigenschaft in Prozent angegeben: ​