CSS-Eigenschaft offset-path

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.