CSS-Eigenschaft offset-anchor

❮ Vorige Nächste ❯

Die Eigenschaft offset-anchor definiert einen Ankerpunkt der Box entlang des Offsetpfades. Der Ankerpunkt gibt den Punkt der Box an, der der Punkt ist, der entlang der Offsetbahn bewegt wird.

Diese Offset-Eigenschaft ist eine experimentelle Technologie.

Anfangswert	auto
Gilt für	Transformierbare Elemente
Geerbt	Nein
Animierbar	Ja
Version	Motion Path Module Level 1
DOM Syntax	object.style.offsetAnchor = "right top";

Syntax

offset-anchor: auto | <position>;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background-color: #ccc;
      padding: 0 50px;
      width: 100%;
      }
      svg, .box {
      position: absolute;
      }
      .box {
      animation: move 3s 0ms infinite alternate ease-in-out;
      background: linear-gradient(#8ebf42 50%,#1c87c9 50%);
      height: 50px;
      width: 50px;
      offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
      }
      @keyframes move {
      100% {
      offset-distance: 100%;
      }
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft offset-anchor</h2>
    <svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
      <path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
    </svg>
    <div class="box"></div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
auto	Nimmt den Wert von offset-position an, vorausgesetzt, dass "auto" und offset-path auf "none" ist.
<position>	<percentage>- Ein Prozentsatz für den horizontalen Versatz ist relativ zur Breite des Inhaltsbereichs. Ein Prozentsatz für den vertikalen Versatz ist relativ zur Höhe des Inhaltsbereichs. <length>- Ein Längenwert gibt einen Längenversatz von der linken oberen Ecke des Inhaltsbereichs der Box an.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.