CSS/Funktionen/ray()

Browserunterstützung
caniuse.com

Die CSS-Funktion ray() definiert das offset-path-Liniensegment, dem ein animiertes Element folgen kann. Das Liniensegment wird als „Strahl“ bezeichnet. Der Strahl beginnt an einer offset-position und erstreckt sich in Richtung des angegebenen Winkels. Die Länge eines Strahls kann durch Angabe einer Größe und Verwendung des Schlüsselworts contain begrenzt werden.

anwendbar auf

• clip-path
• offset-path

Parameter

* <Winkel>
Gibt die Richtung an, in der sich das Liniensegment von der versetzten Startposition aus erstreckt. Der Winkel 0 Grad liegt auf der nach oben zeigenden y-Achse, und positive Winkel nehmen im Uhrzeigersinn zu.

• <size>
  Gibt die Länge des Liniensegments an, d. h. den Abstand zwischen der Versatzentfernung 0 % und 100 % relativ zum umgebenden Rahmen. Dies ist ein optionaler Parameter (wenn kein <size> angegeben ist, wird „closest-side” verwendet). Er akzeptiert einen der folgenden Schlüsselwortwerte:
  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner
  • sides
• contain
  (optional) Reduziert die Länge des Liniensegments, sodass das Element auch bei einem Versatzabstand von 100 % innerhalb des umgebenden Blocks bleibt. Konkret wird die Länge des Segments um die Hälfte der Breite oder die Hälfte der Höhe des Rahmenfelds des Elements reduziert, je nachdem, welcher Wert größer ist, jedoch niemals unter null.
• at <position>
  (optional) Gibt den Punkt an, an dem der Strahl beginnt und an dem das Element in seinem umgebenden Block platziert wird.
  Wenn er enthalten ist, muss dem Wert <position> das Schlüsselwort at vorangestellt werden. Wenn er weggelassen wird, wird der Wert offset-position des Elements verwendet. Wenn er weggelassen wird und das Element keinen Wert offset-position hat, wird für die Startposition des Strahls der Wert offset-position: normal verwendet, wodurch das Element in der Mitte (oder 50 % 50 %) des umgebenden Blocks platziert wird.

Beispiel

/* all parameters specified */
offset-path: ray(50deg closest-corner contain at 100px 20px);

/* two parameters specified, order does not matter */
offset-path: ray(contain 200deg);

/* only one parameter specified */
offset-path: ray(45deg);

 

Siehe auch

• CSS/Tutorials/Animation/offset

Weblinks

• CSSWG.org: the ray() notation Motion Path Module Level 1
• MDN: ray()
• Browser-Support: caniuse.com