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

Свойство CSS offset-path используется для указания пути движения, по которому должен следовать элемент, и определяет его позицию.

Позиция на пути определяется свойством offset-distance.

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

INFO

Свойство offset-path само по себе не анимируется; оно лишь определяет путь. Анимация управляется через свойство offset-distance.

Если вы определили offset-path в CSS, вы можете использовать JavaScript для управления анимацией.

Начальное значение	none
Применяется к	Элементы, поддерживающие трансформацию.
Наследуется	Нет.
Анимируется	Нет.
Версия	Motion Path Module Level 1
DOM-синтаксис	`object.style.offsetPath = "ray()";`

Синтаксис

Синтаксис CSS offset-path

css

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

Пример свойства offset-path с свойствами offset-rotate и animation:

Пример кода CSS offset-path

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 property example</h2>
      <div class="mover"></div>
    </body>
</html>

Try it Yourself »

Пример свойства offset-path:

Ещё один пример кода CSS offset-path

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>

Try it Yourself »

Значения

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

Practice

Что делает свойство CSS offset-path?

Оно определяет путь, по которому элемент будет следовать во время CSS-анимации или перехода.Оно изменяет цвет элемента во время CSS-анимации или перехода.Оно определяет форму и положение элемента на веб-странице.Оно может заставить элемент двигаться по заданному пути.

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

Синтаксис ​

Пример свойства offset-path с свойствами offset-rotate и animation: ​

Пример свойства offset-path: ​