Офсетный анкер - CSS-хитрости

Anonim

offset-anchorСвойство определяет точку внутри коробки она применяется в качестве якоря , который движется вдоль offset-path.

Это довольно многословно, так что давайте разберемся с этим немного.

У вас есть элемент, скажем, коробка:

Смотрите коробку Pen Orange Box Джеффа Грэма (@geoffgraham) на CodePen.

Вы хотите, чтобы эта коробка двигалась по пути, скажем, по волнистой линии. Мы можем сделать эту строку с SVG прямо в HTML и использовать ее как offset-pathполе. Мы создаем анимацию, используя offset-distanceсвойство:

Посмотрите на Pen Orange Square on Path Джеффа Грэма (@geoffgraham) на CodePen.

Хорошо хорошо. Но что, если мы хотим, чтобы коробка выглядела так, будто она висит на конвейере? Вы знаете, как человек, скользящий по тросу.

Вот где offset-anchorпригодится! Он отмечает точку на элементе и использует ее для размещения элемента на пути.

Вот пример, когда три разных прямоугольника прикреплены к одному и тому же пути в разных точках привязки:

См. Pen NMbEpy Джеффа Грэма (@geoffgraham) на CodePen.

Синтаксис

.box ( offset-anchor: (auto | ); )

Значения

  • auto: Принимает значение до offset-positionтех пор, пока это значение не равно, autoи пока offset-pathустановлено значение none.
  • position
    • : Единица измерения, рассчитываемая на основе относительной ширины и высоты контейнера, в котором она находится. Например, 50% 50%это будет мертвая точка. Обратите внимание, что ключевые слова здесь работают точно так же, как background-positionwhere center centerвернет тот же результат.
    • : Единица измерения, которая смещает якорь от верхнего левого угла рамки элемента.

Стоит отметить, что positionэто свойство, которое можно анимировать.

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

На offset-*момент написания этой статьи свойства все еще считаются экспериментальной функцией. Если текущее отсутствие поддержки браузера заставляет вас не решаться использовать его в проекте, тогда вы можете рассмотреть возможность использования GSAP для этого уровня анимации. Это предложит вам самую широкую поддержку браузера на данный момент.

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox IE Край Сафари
46 72 Нет 79 Нет

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
88 85 81 год Нет

Начиная с Chrome 46 и Opera 33 (и связанных с ними мобильных версий) у нас есть «начальная поддержка» в Blink (без флага).

Дополнительная информация

  • Спецификация модуля пути движения уровня 1
  • Билет WebKit № 139128
  • Билет Mozilla № 1186329
  • Запрос функции Microsoft Edge