Función ray() de CSS

Definición y uso

CSS ray() La función define el segmento de línea de trayectoria de desplazamiento que el elemento de animación debe seguir, que se llama 'rayo'. El rayo comienza en la posición de desplazamiento y se extiende en la dirección del ángulo especificado.

ray() Función con offset-path Se utilizan propiedades juntas.

Ejemplo

Ejemplo 1

Rayos desde diferentes ángulos:

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

Prueba personalmente

Ejemplo 2

usar offset-path y ray() Implementar efecto de animación:

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

Prueba personalmente

Sintaxis CSS

ray(ángulo tamaño contain at position)
Valor Descripción
ángulo Obligatorio. Especifica la dirección/ángulo de la radiación.
tamaño

Opcional. Especifica la longitud de la radiación, es decir, la distancia entre offset-distance 0% y 100% con respecto al contenedor.

Acepta uno de los siguientes valores de palabra clave:

  • closest-side - (Predeterminado) La distancia entre el punto de partida de la radiación y el lado más cercano del contenedor.
  • closest-corner - La distancia entre el punto de partida de la radiación y el ángulo más cercano del contenedor.
  • farthest-side - La distancia entre el punto de partida de la radiación y el lado más lejano del contenedor.
  • farthest-corner - La distancia entre el punto de partida de la radiación y el ángulo más lejano del contenedor.
  • sides - La distancia entre el punto de partida de la radiación y el punto de intersección entre el segmento y el borde del contenedor.
contain Opcional. Acorta la longitud de la radiación para asegurarse de que el elemento se mantenga dentro del contenedor incluso cuando offset-distance: 100%.
at position

Opcional. Especifica el punto de partida de la radiación y la posición del elemento dentro del contenedor.

Si se omite, se utiliza el valor de offset-position del elemento.

Si el elemento no tiene el valor de offset-position, se coloca el elemento en el centro del contenedor (es decir, 50% 50%).

Detalles técnicos

Versión: Módulo de Ruta de Movimiento CSS Nivel 1

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Ópera
116 116 122 17 102

Páginas relacionadas

Referencia:Atributo offset-path