CSS свойство offset-path

Свойство offset-path указывает движение по траектории и устанавливает положение элемента .

Положение элемента на траектории определяется свойством offset-distance.

В более ранних версиях спецификации, свойство offset-path называлось ''motion-path''.

Свойство offset-path не анимируется, оно только определяет траекторию для анимации.
Данное свойство находится в экспериментальной стадии.
Значение по умолчанию none
Применяется К трансформируемым элементам.
Наследуется Нет
Анимируемое Да
Версия Motion Path Module Level 1
DOM синтаксис object.style.offsetPath = "ray()";

Синтаксис

offset-path: none | ray() | path() | <url> | <basic-shape>;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body{
      background-color: #ccc;
      }
      .mover {
      width: 70px;
      height: 70px;
      background: linear-gradient(#8ebf42 50%,#1c87c9 50%);
      position: absolute;
      left: 30%;
      top: 100px;
      offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
      offset-rotate: reverse;
      animation: move 3s linear infinite;
      }
      @keyframes move {
      100% { 
      offset-distance: 100%;
      }
      }
    </style>
  <body>
    <h2>Пример свойства offset-path</h2>
    <div class="mover"></div>
  </body>
</html>

Рассмотрим другой пример со свойством offset-path:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body{
      background-color: #666;
      }
      .item {
      width: 100px;
      height: 40px;
      offset-position: 0% 0%;
      offset-path: path('m 100 50 h 150 v 150');
      }
      #box1 {
      background-color: #8ebf42;
      offset-distance: -280%;
      }
      #box2 {
      background-color: #1c87c9;
      offset-distance: 190%;
      }
    </style>
  <body>
    <div class="item" id="box1"></div>
    <div class="item" id="box2"></div>
  </body>
</html>

Значения

Значение Описание
none Траектория движения не указана. Значение по умолчанию.
ray() Сегмент линии начинается с позиции блока и продолжается в направлении, которое установлено указанным углом.
url() Указывает, какой ID элемента SVG должен быть использован как траектория движения.
<basic-shape> Указывает форму, которая включает circle(), ellipse(), inset(), polygon() или path().
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

55.0+ x 63.0+ x 45.0+


Считаете ли это полезным?

Похожие статьи