CSS-Eigenschaft offset-path

Die CSS-Eigenschaft offset-path wird verwendet, um einen Bewegungspfad für ein nachfolgendes Element anzugeben und definiert die Position des Elements.

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

In den früheren Versionen der Spezifikation war der Name von offset-path ''motion-path''.

Die Eigenschaft offset-path wird nicht animiert, sie definiert nur den Pfad für die Animation.
Diese Eigenschaft offset ist eine experimentelle Technologie.
Anfangswert none
Gilt für Transformierbare Elemente
Geerbt Nein
Animierbar Ja
Version Motion Path Module Level 1
DOM Syntax object.style.offsetPath = "ray()";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft offset-path</h2>
    <div class="mover"></div>
  </body>
</html>

Ein anderes Beispiel mit der Eigenschaft offset-path:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>

Werte

Wert Beschreibung
none Es ist kein Bewegungspfad angegeben. Das ist der Standardwert dieser Eigenschaft.
ray() Ein Liniensegment, das von der Position der Box ausgeht und in die durch den angegebenen Winkel definierte Richtung verläuft.
url() Referenziert die ID eines SVG-Elements, das als Bewegungspfad verwendet werden soll.
<basic-shape> Spezifiziert eine Form, die Folgendes beinhaltet: circle(), ellipse(), inset(), polygon(), oder path().
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

55.0+ 63.0+ 45.0+


Finden Sie das nützlich?

Ähnliche Artikel