Função ray() do CSS

Definição e uso

CSS ray() A função define o segmento de linha de trajectória de deslocamento que o elemento de animação deve seguir, que é chamado de 'raio'. O raio começa na posição de deslocamento e se estende na direcção do ângulo especificado.

ray() Função com offset-path Atributos podem ser usados juntos.

Exemplo

Exemplo 1

Raios em 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);
}

Experimente você mesmo

Exemplo 2

usando offset-path e ray() Realizar efeito de animação:

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

Experimente você mesmo

Sintaxe CSS

ray(angle size contain at position)
Valor Descrição
angle Obrigatório. Especifica a direção/ângulo da radiação.
size

Opcional. Especifica o comprimento da radiação, ou seja, a distância entre offset-distance 0% e 100% em relação à caixa contida.

Ele aceita um dos seguintes valores de palavras-chave:

  • closest-side - (padrão) distância entre o ponto de partida da radiação e a borda mais próxima do bloco contido
  • closest-corner - distância entre o ponto de partida da radiação e o canto mais próximo do bloco contido
  • farthest-side - distância entre o ponto de partida da radiação e a borda mais distante do bloco contido
  • farthest-corner - distância entre o ponto de partida da radiação e o canto mais distante do bloco contido
  • sides - distância entre o ponto de partida da radiação e o ponto de interseção entre o segmento e a borda do bloco contido
contain Opcional. Reduz o comprimento da radiação para garantir que o elemento permaneça dentro do bloco contido mesmo quando offset-distance: 100%.
at position

Opcional. Especifica o ponto de partida da radiação e a posição do elemento dentro do bloco contido.

Se omitido, usa-se o valor de offset-position do elemento.

Se o elemento não tiver valor de offset-position, o elemento é colocado no centro do bloco contido (ou seja, 50% 50%).

Detalhes técnicos

Versão: Módulo de Caminho de Movimento CSS Level 1

Suporte do navegador

Os números na tabela representam a versão do navegador que suportou completamente a função pela primeira vez.

Chrome Edge Firefox Safari Ópera
116 116 122 17 102

Páginas relacionadas

Referência:A propriedade offset-path