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

Свойство offset-distance используется для указания позиции вдоль offset-path.

Оно принимает следующие значения: «length» и «percentages». Значение по умолчанию — 0.

INFO

Отрицательные значения допустимы.

WARNING

Данное свойство offset является экспериментальной технологией.

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

Начальное значение	0
Применяется к	Элементы, поддающиеся трансформации.
Наследуется	Нет.
Анимировано	Да.
Версия	Motion Path Module Level 1
DOM-синтаксис	object.style.offsetDistance = "100%";

Синтаксис

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

css

offset-distance: &lt;length-percentage&gt;;

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

Пример с изображением дома и ножниц

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 80px;
        height: 80px;
        background: linear-gradient(#eee 50%, #1c87c9 50%);
        position: absolute;
        left: 20%;
        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 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <div class="mover"></div>
  </body>
</html>

Try it Yourself »

Пример свойства offset-distance, заданного в процентах:

Пример свойства CSS offset-distance

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .scissorHalf {
        offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
        animation: followpath 4s linear infinite;
      }
      @keyframes followpath {
        to {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <svg class="box" width="700" height="450" viewBox="350 0 1400 900">
      <title>House and Scissors</title>
      <rect x="595" y="423" width="610" height="377" fill="#1c87c9" />
      <polygon points="506,423 900,190 1294,423" fill="#8ebf42" />
      <polygon points="993,245 993,190 1086,190 1086,300" fill="#666" />
      <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />
      <path id="secondScissorHalf" class="scissorHalf" d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" />
    </svg>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
`<length-percentage>`	И длина, и процентное значение указывают начальную позицию вдоль пути смещения до конечной позиции.

initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Что позволяет сделать свойство CSS 'offset-distance'?

Позволяет задать градиент для фона с линейным градиентом.Позволяет определить расстояние вдоль пути для позиционирования элемента.Позволяет задать отступ между двумя элементами.Позволяет задать поворот элемента.Позволяет разместить элемент вдоль заданного пути.

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

Синтаксис ​

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

Пример свойства offset-distance, заданного в процентах: ​