Funzione ray() CSS

Definizione e uso

CSS ray() La funzione definisce il segmento di percorso di offset che l'elemento animato deve seguire, che viene chiamato "ray". Il ray parte dalla posizione di offset e si estende nella direzione dell'angolo specificato.

ray() Funzione con offset-path Proprietà utilizzate insieme.

Esempio

Esempio 1

Rayi di diversi angoli:

#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 personalmente

Esempio 2

usando offset-path e ray() Realizzare l'effetto animazione:

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

Prova personalmente

Sintassi CSS

ray(angle size contain at position)
Valore Descrizione
angle Obbligatorio. Specifica la direzione/angolo della radice.
size

Opzionale. Specifica la lunghezza della radice, ossia la distanza tra offset-distance 0% e 100% rispetto al riquadro contenitore.

Accetta uno dei seguenti valori di parola chiave:

  • closest-side - (predefinito) La distanza tra il punto di partenza della radice e il lato più vicino del blocco contenitore.
  • closest-corner - La distanza tra il punto di partenza della radice e l'angolo più vicino del blocco contenitore.
  • farthest-side - La distanza tra il punto di partenza della radice e il lato più lontano del blocco contenitore.
  • farthest-corner - La distanza tra il punto di partenza della radice e l'angolo più lontano del blocco contenitore.
  • sides - La distanza tra il punto di partenza della radice e il punto di intersezione tra la segmento e il bordo del blocco contenitore.
contain Opzionale. Abbassa la lunghezza della radice per assicurarsi che l'elemento rimanga all'interno del blocco contenitore anche quando offset-distance: 100%.
at position

Opzionale. Specifica il punto di partenza della radice e la posizione dell'elemento nel blocco contenitore.

Se omesso, viene utilizzato il valore di offset-position dell'elemento.

Se l'elemento non ha un valore di offset-position, l'elemento viene posizionato al centro del blocco contenitore (cioè 50% 50%).

Dettagli tecnici

Versione: Modulo di percorso animato CSS Livello 1

Supporto del browser

Le cifre nella tabella rappresentano la versione del browser che supporta completamente la funzione per la prima volta.

Chrome Edge Firefox Safari Opera
116 116 122 17 102

Pagine correlate

Riferimento:Proprietà offset-path