offset-anchor
Властивість визначає точку всередині коробки вона застосовується в якості якоря , який рухається уздовж offset-path
.
Це якось багатослівно, тож давайте трохи розберемо це.
У вас є елемент, скажімо поле:
Дивіться Помаранчеву коробку від Джеффа Грема (@geoffgraham) на CodePen.
Ви хочете, щоб ця коробка рухалася по доріжці, скажімо, кривлячись. Ми можемо зробити цей рядок за допомогою SVG безпосередньо в HTML і використовувати його як offset-path
поле. Ми створюємо анімацію, використовуючи offset-distance
властивість:
Дивіться Помаранчеву площу пера на Шлях від Джеффа Грема (@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