Функция CSS ray()

Определение и использование

CSS ray() Функция определяет отрезок траектории смещения, который элемент анимации должен следовать, и этот отрезок называется 'лучом'. Луч начинается от смещения и extends в направлении указанного угла.

ray() Функция с offset-path Свойства используются вместе.

Пример

Пример 1

Разные углы лучей:

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

Попробуйте сами

пример 2

используются offset-path и ray() Реализация анимации:

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

Попробуйте сами

Синтаксис CSS

ray(angle size contain at position)
Значение Описание
angle Обязателен. Определяет направление/угол луча.
size

Опционально. Определяет длину луча, то есть расстояние от offset-distance 0% до 100% по отношению к содержащему окну.

Он принимает один из следующих ключевых значений:

  • closest-side - (по умолчанию) расстояние от точки начала луча до ближайшей стороны содержащего блока
  • closest-corner - расстояние от точки начала луча до ближайшего угла содержащего блока
  • farthest-side - расстояние от точки начала луча до самой удаленной стороны содержащего блока
  • farthest-corner - расстояние от точки начала луча до самого удаленного угла содержащего блока
  • sides - расстояние от точки начала луча до точки пересечения луча и границы содержащего блока
contain Опционально. Укорачивает длину луча, чтобы элемент оставался в содержащем блоке, даже если offset-distance: 100%.
at position

Опционально. Определяет точку начала луча и положение элемента в содержащем блоке.

Если опущен, то используется значение offset-position элемента.

Если у элемента нет значения offset-position, то элемент располагается в центре содержащего блока (т.е. 50% 50%).

Технические детали

Версия: Модуль CSS Motion Path Level 1

Поддержка браузерами

Числа в таблице указывают на версию браузера, которая首个完全支持此功能。

Хром Эдж Фаерфокс Сафари Опера
116 116 122 17 102

Связанные страницы

См. также:Свойство offset-path