CSS ray() functie

Definitie en gebruik

CSS ray() De functie definieert het offset-patroon voor de animatie-elementen die gevolgd moeten worden, wat het 'straal' wordt genoemd. De straal begint bij de offset-positie en strekt zich uit in de richting van het opgegeven hoek.

ray() Functie en offset-path Eigenschappen samen gebruiken.

Voorbeeld

Voorbeeld 1

Rayen van verschillende hoeken:

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

Probeer het zelf

Voorbeeld 2

gebruik offset-path en ray() Realiseer de animatie-effect:

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

Probeer het zelf

CSS syntaxis

ray(angle size contain at Position
) Beschrijving
angle Verplicht. Specificeer de richting/hoek van de straal.
size

Optioneel. Specificeer de lengte van de straal, dat wil zeggen de afstand tussen offset-distance 0% en 100% ten opzichte van het inheemse kader.

Het accepteert een van de volgende sleutelwaarden:

  • closest-side - (Standaard) De afstand tussen het startpunt van de straal en de dichtstbijzijnde zijde van het inheemse blok.
  • closest-corner - De afstand tussen het startpunt van de straal en de dichtstbijzijnde hoek van het inheemse blok.
  • farthest-side - De afstand tussen het startpunt van de straal en de meest afgelegen zijde van het inheemse blok.
  • farthest-corner - De afstand tussen het startpunt van de straal en de meest afgelegen hoek van het inheemse blok.
  • sides - De afstand tussen het startpunt van de straal en het kruispunt van de lijn met de rand van het inheemse blok.
contain Optioneel. Verkorte de lengte van de straal om ervoor te zorgen dat het element blijft binnen het inheemse blok, zelfs als offset-distance: 100% wordt gebruikt.
at Position

Optioneel. Specificeer de startpunt van de straal en de positie van het element binnen de inheemse blok.

Als het wordt weggelaten, wordt de offset-position-waarde van het element gebruikt.

Als een element geen offset-position-waarde heeft, wordt het element geplaatst in het midden van de inheemse blok (dat wil zeggen 50% 50%).

Technische details

Versie: CSS Motie Path Module Level 1

Browserondersteuning

Tafels met cijfers geven de browserversie aan die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
116 116 122 17 102

Gerelateerde pagina's

Referentie:offset-path eigenschap