Офсет-котва - CSS-трикове

Anonim

В offset-anchorимота определя точка в рамките на полето се прилага като котва, която се движи по offset-path.

Това е доста многословно, така че нека да го разделим малко.

Имате елемент, да речем кутия:

Вижте Pen Orange Box от Geoff Graham (@geoffgraham) на CodePen.

Искате тази кутия да се движи по пътека, да речем криволичеща линия. Можем да направим този ред с SVG директно в HTML и да го използваме като offset-pathза полето. Създаваме анимацията, като използваме offset-distanceсвойството:

Вижте Pen Orange Square на Path от Geoff Graham (@geoffgraham) на CodePen.

Добре добре. Но какво, ако искаме кутията да изглежда така, сякаш виси извън линията? Знаете ли, като човек, плъзгащ се по цип.

Ето къде offset-anchorидва! Той маркира място върху елемента и използва това, за да позиционира елемента по пътя.

Ето пример, когато три различни кутии са прикрепени към една и съща пътека в различни опорни точки:

Вижте Pen NMbEpy от Geoff Graham (@geoffgraham) на CodePen.

Синтаксис

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

Стойности

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

Струва си да се отбележи, че това positionе анимационно свойство.

Поддръжка на браузър

Към offset-*момента на написването свойствата все още се считат за експериментална характеристика. Ако текущата липса на поддръжка на браузър ви кара да се колебаете да я използвате в проект, тогава може да помислите дали да не използвате GSAP за това ниво на анимация. Това ще ви предложи най-широката поддръжка на браузъра в момента.

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox 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