CSS ray() function

Definition and usage

CSS ray() The function defines the offset path segment that the animation element should follow, which is called 'ray'. The ray starts from the offset position and extends in the direction of the specified angle.

ray() Functions with offset-path Properties are used together.

Instance

Example 1

Different angles of rays:

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

Prøv det selv

Eksempel 2

med offset-path og ray() Implementer animationseffekten:

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

Prøv det selv

CSS syntaks

ray(vinkel størrelse contain at position)
Værdi Beskrivelse
vinkel Obligatorisk. Angiv strålens retning/vinkel.
størrelse

Valgfri. Angiv strålens længde, dvs. afstanden mellem offset-distance 0% til 100% relativt til indholdskassen.

Det accepterer en af følgende nøgleværdier:

  • closest-side - (Standard) Afstanden mellem strålens startpunkt og indholdskassens nærmeste side.
  • closest-corner - Afstanden mellem strålens startpunkt og indholdskassens nærmeste corner.
  • farthest-side - Afstanden mellem strålens startpunkt og indholdskassens mest fjern side.
  • farthest-corner - Afstanden mellem strålens startpunkt og indholdskassens mest fjern corner.
  • sides - Afstanden mellem strålens startpunkt og skåret punkt på linjen og indholdskassens kant.
contain Valgfri. Forkort strålens længde for at sikre, at elementet stadig forbliver inden for indholdskassen selv ved offset-distance: 100%.
at position

Valgfri. Angiv startpunktet for strålen samt elementets placering i indholdskassen.

Hvis det udelades, bruges elementets offset-position værdi.

Hvis elementet ikke har en offset-position værdi, placeres elementet i midten af indholdskassen (dvs. 50% 50%).

Teknisk detalje

Version: CSS Motion Path Module Level 1

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne funktion.

Chrome Edge Firefox Safari Opera
116 116 122 17 102

Relaterede sider

Reference:offset-path egenskab