CSS ray() funktion

definition och användning

CSS ray() funktionen definierar den offset-påverkningslinje som animating elementen bör följa, som kallas 'stråle'. Strålen börjar från offset-positionen och sträcker sig i riktning av den specificerade vinkeln.

ray() funktioner med offset-path egenskaper används tillsammans.

exempel

Exempel 1

vinkliga strålar från olika håll:

#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);
}

Prova själv

Exempel 2

med offset-path och ray() Implementera animationseffekten:

 #frameDiv {
  bredd: 200px;
  höjd: 200px;
  marginal: 20px;
  position: relativ;
  kanter: fast svart 1px;
  background-color: rgb(205, 242, 205);
}
#frameDiv > div {
  bredd: 50px;
  höjd: 50px;
  background-color: hotpink;
  offset-path: ray(45deg);
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

Prova själv

CSS-syntax

ray(vinkel storlek innehåll på position)
Värde Beskrivning
vinkel Obligatorisk. Ange strålets riktning/ålder.
storlek

Valfritt. Ange strålets längd, dvs. avståndet från 0% till 100% av offset-distance relativt till innehållsramen.

Det accepterar en av följande nyckelvärden:

  • closest-side - (Standard) Avståndet från strålpunkten till innehållsblockets närmaste sida.
  • closest-corner - Avståndet från strålpunkten till innehållsblockets närmaste hörn.
  • farthest-side - Avståndet från strålpunkten till innehållsblockets mest avlägsna sida.
  • farthest-corner - Avståndet från strålpunkten till innehållsblockets mest avlägsna hörn.
  • sidor - Avståndet från strålpunkten till den punkt där strålen korsar innehållsblockets kant.
innehåll Valfritt. Förkorta strålets längd för att säkerställa att elementet förblir inom innehållsblocket även när offset-distance: 100% används.
på position

Valfritt. Ange startpunkten för strålen samt elementets placering i innehållsblocket.

Om det utelämnas, används elementets offset-position värde.

Om elementet inte har ett offset-position värde, placeras elementet i mitten av innehållsblocket (dvs. 50% 50%).

Tekniska detaljer

Version: CSS Motion Path Module Level 1

Webbläsarstöd

Tabellens siffror anger den första webbläsarversion som helt stöder denna funktion.

Chrome Edge Firefox Safari Opera
116 116 122 17 102

Relaterade sidor

Referens:offset-path egenskap