CSS ray() Funktion

Definition und Verwendung

CSS ray() Die Funktion definiert den Offset-Pfad, den der animierte Element folgen soll, der als "Strahl" bezeichnet wird. Der Strahl beginnt am Offset-Position und erstreckt sich in Richtung der angegebenen Winkel.

ray() Funktion mit offset-path Eigenschaften können gemeinsam verwendet werden.

Beispiel

Beispiel 1

Strahlen aus verschiedenen Winkeln:

#square1 {
  width: 65px;
  height: 65px;
  background: yellow;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 65px;
  height: 65px;
  background: pink;
  offset-position: top right;
  offset-path: ray(-25deg);
}
#square3 {
  width: 65px;
  height: 65px;
  background: salmon;
  offset-position: bottom left;
  offset-path: ray(90deg);
}

Versuchen Sie es selbst

Beispiel 2

verwenden offset-path und ray() Um den Animationseffekt zu erreichen:

 #frameDiv {
  width: 200px;
  height: 200px;
  margin: 20px;
  position: relative;
  border: solid black 1px;
  background-color: rgb(205, 242, 205);
}
#frameDiv > div {
  width: 50px;
  height: 50px;
  background-color: hotpink;
  offset-path: ray(45deg);
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

Versuchen Sie es selbst

CSS-Syntax

ray(angle size contain at position)
Wert Beschreibung
angle Erforderlich. Bestimmt die Richtung/Drehung der Strahlung.
size

Optional. Bestimmt die Länge der Strahlung, d.h. den Abstand zwischen offset-distance 0% und 100% relativ zum umschließenden Rahmen.

Es akzeptiert einen der folgenden Schlüsselwerte:

  • closest-side - (Standard) Der Abstand zwischen dem Ausgangspunkt der Strahlung und der nächsten Seite des umschließenden Blocks.
  • closest-corner - Der Abstand zwischen dem Ausgangspunkt der Strahlung und der nächsten Ecke des umschließenden Blocks.
  • farthest-side - Der Abstand zwischen dem Ausgangspunkt der Strahlung und der weitesten Seite des umschließenden Blocks.
  • farthest-corner - Der Abstand zwischen dem Ausgangspunkt der Strahlung und der weitesten Ecke des umschließenden Blocks.
  • sides - Der Abstand zwischen dem Ausgangspunkt der Strahlung und dem Punkt der Kante, an dem die Strahlung mit der Grenze des umschließenden Blocks kreuzt.
contain Optional. Kurzt die Länge der Strahlung ab, um sicherzustellen, dass das Element auch bei offset-distance: 100% innerhalb des umschließenden Blocks bleibt.
at position

Optional. Bestimmt den Ausgangspunkt der Strahlung sowie die Position des Elements im umschließenden Block.

Wird weggelassen, wird der offset-position-Wert des Elements verwendet.

Wenn dem Element kein offset-position-Wert zugewiesen ist, wird das Element in der Mitte des umschließenden Blocks positioniert (d.h. 50% 50%).

Technische Details

Version: CSS Motion Path Module Level 1

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Funktion vollständig unterstützen.

Chrome Edge Firefox Safari Oper
116 116 122 17 102

Verwandte Seiten

Referenz:offset-path Eigenschaft