CSS offset-path-Eigenschaft

Die CSS-Eigenschaft offset-path wird verwendet, um einen Bewegungspfad anzugeben, dem ein Element folgen soll, und definiert die Position des Elements.

Die Position auf dem Pfad wird durch die offset-distance Eigenschaft bestimmt.

In früheren Versionen der Spezifikation hieß offset-path ''motion-path''. Der Name wurde jedoch zu offset-path geändert, da die Eigenschaft statische Positionen angibt.

INFO

Die Eigenschaft offset-path selbst ist nicht animierbar; sie definiert lediglich den Pfad. Die Animation wird über die Eigenschaft offset-distance gesteuert.

Wenn Sie offset-path in CSS definiert haben, können Sie JavaScript verwenden, um die Animation zu steuern.

Anfangswert	none
Anwendbar auf	Transformierbare Elemente.
Vererbt	Nein.
Animierbar	Nein.
Version	Motion Path Module Level 1
DOM-Syntax	`object.style.offsetPath = "ray()";`

Syntax

CSS-Syntax für offset-path

css

offset-path: none | ray() | path() | url() | <basic-shape>;

Beispiel für die offset-path-Eigenschaft mit den Eigenschaften offset-rotate und animation:

CSS-Codebeispiel für offset-path

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 30%;
        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 3s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-path property example</h2>
      <div class="mover"></div>
    </body>
</html>

Try it Yourself »

Beispiel für die offset-path-Eigenschaft:

Ein weiteres CSS-Codebeispiel für offset-path

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #666;
      }
      .item {
        width: 100px;
        height: 40px;
        offset-position: 0% 0%;
        offset-path: path('m 100 50 h 150 v 150');
      }
      #box1 {
        background-color: #8ebf42;
        offset-distance: -280%;
      }
      #box2 {
        background-color: #1c87c9;
        offset-distance: 190%;
      }
    </style>
    <body>
      <div class="item" id="box1"></div>
      <div class="item" id="box2"></div>
    </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung
`none`	Es wird kein Bewegungspfad angegeben. Dies ist der Standardwert.
`ray()`	Ein Liniensegment, das an der Position des Elements beginnt und sich in die Richtung bewegt, die durch den angegebenen Winkel definiert ist.
`url()`	Verweist auf die ID eines SVG-Elements, das als Bewegungspfad verwendet werden soll.
`<basic-shape>`	Gibt eine Form an, die Folgendes umfasst: `circle()`, `ellipse()`, `inset()`, `polygon()` oder `path()`.

Praxis

Was bewirkt die CSS-Eigenschaft offset-path?

Sie bestimmt den Pfad, dem ein Element während einer CSS-Animation oder eines Übergangs folgt.Sie passt die Farbe eines Elements während einer CSS-Animation oder eines Übergangs an.Sie bestimmt die Form und Position eines Elements auf einer Webseite.Sie kann ein Element entlang eines definierten Pfads bewegen.

CSS offset-path-Eigenschaft ​

Syntax ​

Beispiel für die offset-path-Eigenschaft mit den Eigenschaften offset-rotate und animation: ​

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