Funkcja CSS ray()

Definicja i użycie

CSS ray() Funkcja definiuje odcinek ścieżki offsetowej, którą element animacji powinien podążać, nazywaną 'promieniem'. Promień zaczyna się od pozycji offsetowej i rozciąga się w kierunku określonego kąta.

ray() Funkcja z offset-path Właściwości są używane razem.

Przykład

Przykład 1

Promienie pod różnymi kątami:

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

Spróbuj sam

Przykład 2

z użyciem offset-path i ray() Wprowadzenie efektu animacji:

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

Spróbuj sam

Gramatyka CSS

ray(angle size contain at position)
Wartość Opis
angle Wymagane. Określa kierunek/kąt promienia.
size

Opcjonalne. Określa długość promienia, tj. odległość w stosunku do ramki zawierającej od offset-distance 0% do 100%.

Akceptuje jedną z poniższych wartości kluczowych:

  • closest-side - (domyślne) Odległość między punktem startu promienia a najbliższą stroną bloku zawierającego.
  • closest-corner - Odległość między punktem startu promienia a najbliższym kątem bloku zawierającego.
  • farthest-side - Odległość między punktem startu promienia a najdalszą stroną bloku zawierającego.
  • farthest-corner - Odległość między punktem startu promienia a najdalszym kątem bloku zawierającego.
  • sides - Odległość między punktem startu promienia a punktem przecięcia odcinka z granicami bloku zawierającego.
contain Opcjonalne. Skraca długość promienia, aby upewnić się, że nawet przy offset-distance: 100% element pozostaje wewnątrz bloku zawierającego.
at position

Opcjonalne. Określa punkt startu promienia oraz pozycję elementu w bloku zawierającym.

Jeśli jest pominięty, używa się wartości offset-position elementu.

Jeśli element nie ma wartości offset-position, element umieszczany jest w środku bloku zawierającego (tj. 50% 50%).

Szczegóły techniczne

Wersja: Moduł CSS Motion Path Level 1

Obsługa przeglądarek

Tabela zawiera liczby reprezentujące pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Chrome Edge Firefox Safari Opera
116 116 122 17 102

Strony związane

Odnośnik:Atrybut offset-path