Офсет-сидро - ЦСС-трикови

Anonim

offset-anchorОсобина дефинише тачку у кутији се примењује као сидро које креће дуж offset-path.

То је некако речито, па хајде да то мало разбијемо.

Имате елемент, рецимо оквир:

Погледајте наранчасту кутију од Геофф-а Грахам-а (@геоффграхам) на ЦодеПен-у.

Желите да се тај оквир креће стазом, рецимо врцкавом линијом. Ту линију можемо да направимо са СВГ директно у ХТМЛ-у и користимо је као offset-pathоквир. Анимацију креирамо тако што користимо offset-distanceсвојство:

Погледајте Пен Пен Оранге Скуаре на Патх, Геофф Грахам (@геоффграхам) на ЦодеПен.

Добро добро. Али шта ако желимо да кутија изгледа као да виси са линије? Знате, попут особе која клизи по зип линији.

Ту offset-anchorдолази! Означава место на елементу и користи га за позиционирање елемента на путањи.

Ево примера где су три различита оквира причвршћена за исту путању на различитим тачкама сидрења:

Погледајте Пен НМбЕпи Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Синтакса

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

Вредности

  • auto: Узима вредност offset-positionсве док та вредност није такође autoи док offset-pathје постављена на none.
  • position
    • : Јединица која се израчунава на основу релативне ширине и висине контејнера у којем се налази. На пример, 50% 50%била би мртва тачка. Имајте на уму да кључне речи овде раде, баш као и background-positionгде center centerби вратиле исти резултат.
    • : Јединица која одмиче сидро од горњег левог угла кутије елемента.

Вреди напоменути да positionје то анимирано својство.

Подршка прегледача

У offset-*особине и даље сматра експериментална функција у време писања овог текста. Ако вас тренутни недостатак подршке прегледача оклева да је користите у пројекту, можда бисте желели да размислите о употреби ГСАП-а за овај ниво анимације. Ово ће вам понудити тренутно најширу подршку за прегледаче.

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
46 72 Не 79 Не

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 81 Не

Од Цхроме 46 и Опера 33 (и сродних мобилних верзија) имамо „почетну подршку“ у Блинк-у (без заставице).

Додатне Информације

  • Спецификација модула путне путање нивоа 1
  • Улазница за ВебКит # 139128
  • Мозилла Тицкет # 1186329
  • Захтев за функцију Мицрософт Едге