offset-anchor

Базовая 2022

Новое

С сентября 2022 года эта функция работает на последних версиях устройств и браузеров. Возможно, она не будет работать на старых устройствах или браузерах.

Свойство offset-anchor CSS определяет точку внутри области элемента, перемещающегося по offset-path, которая фактически движется по пути.

Попробуйте

Синтаксис

/* Keyword values */
offset-anchor: top;
offset-anchor: bottom;
offset-anchor: left;
offset-anchor: right;
offset-anchor: center;
offset-anchor: auto;

/* <percentage> values */
offset-anchor: 25% 75%;

/* <length> values */
offset-anchor: 0 0;
offset-anchor: 1cm 2cm;
offset-anchor: 10ch 8em;

/* Edge offsets values */
offset-anchor: bottom 10px right 20px;
offset-anchor: right 3em bottom 10px;

/* Global values */
offset-anchor: inherit;
offset-anchor: initial;
offset-anchor: revert;
offset-anchor: revert-layer;
offset-anchor: unset;

Значения

auto: offset-anchor принимает значение, равное значению свойства transform-origin элемента, если offset-path не равно none, в противном случае оно принимает значение из offset-position.
<position>: <position> определяет координаты x/y, для размещения элемента относительно границ области элемента. Может быть определено с помощью одного до четырёх значений. Более подробную информацию можно найти на страницах справочника <position> и background-position. Обратите внимание, что синтаксис позиции с 3 значениями не работает ни для каких вариантов использования <position>, за исключением background(-position).

Формальное определение

Начальное значение	`auto`
Применяется к	элементам, которые можно преобразовать
Наследуется	нет
Проценты	относительно ширины и высоты области ссылки элемента
Вычисленное значение	для `<length>` абсолютное значение, в противном случае процент
Тип анимации	положение

Формальный синтаксис

offset-anchor = 
  auto        |
  <position>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Установка различных значений offset-anchor

В следующем примере у нас есть три <div> элемента, вложенных в <section> элементы. Каждый <div> получает тот же offset-path (горизонтальную линию длиной 200 пикселей) и анимируется для перемещения по нему. Затем трём элементам присваиваются различные background-color и значения offset-anchor.

Каждый <section> стилизован линейным градиентом, чтобы отобразить горизонтальную линию по центру, чтобы показать вам, где проходят пути смещения <div>.

Это позволяет увидеть эффект различных значений offset-anchor — первое значение, auto, заставляет центральную точку <div> перемещаться вдоль пути. Два других значения заставляют верхнюю правую и нижнюю левую точки <div> перемещаться по пути соответственно.

HTML

<section>
  <div class="offset-anchor1"></div>
</section>
<section>
  <div class="offset-anchor2"></div>
</section>
<section>
  <div class="offset-anchor3"></div>
</section>

CSS

div {
  offset-path: path("M 0,20 L 200,20");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
}

section {
  background-image: linear-gradient(
    to bottom,
    transparent,
    transparent 49%,
    #000 50%,
    #000 51%,
    transparent 52%
  );
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.offset-anchor1 {
  offset-anchor: auto;
  background: cyan;
}

.offset-anchor2 {
  offset-anchor: right top;
  background: purple;
}

.offset-anchor3 {
  offset-anchor: left bottom;
  background: magenta;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

Результат

Спецификации

Спецификация
Модуль движения уровня 1 # offset-anchor-property

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`offset-anchor`	116	116	72	102	16	116	79	78	16	24.0	116
`auto`	116	116	72	102	16	116	79	78	16	24.0	116

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/offset-anchor