Offset-horgony - CSS-trükkök

Anonim

A offset-anchortulajdonság meghatároz egy pontot azon a dobozon belül, amelyet az horgonyként alkalmaz, amely a offset-path.

Ez eléggé szókimondó, szóval bontsuk ezt le egy kicsit.

Van egy elemed, mondjuk egy doboz:

Lásd Geoff Graham (@geoffgraham) Pen Orange Box-ját a CodePen-en.

Azt akarja, hogy ez a doboz egy ösvényen mozogjon, mondjuk egy vékony vonal. Megtehetjük ezt a sort az SVG-vel közvetlenül a HTML-ben, és a mezőhöz használjuk offset-path. Az animációt a offset-distancetulajdonság felhasználásával készítjük:

Lásd a Pen Orange Square on Path-t Geoff Graham (@geoffgraham) a CodePen-en.

Jó jó. De mi van, ha azt akarjuk, hogy a doboz úgy nézzen ki, mintha lógna a vonalról? Tudod, mint egy cipzáras vonalon csúszó ember.

Ott offset-anchorjön be! Foltot jelöl az elemen, és ezt használja az elem elhelyezésére az ösvényen.

Íme egy példa, ahol három különböző mező van rögzítve ugyanahhoz az úthoz különböző rögzítési pontokban:

Lásd Geoff Graham (@geoffgraham) Pen NMbEpy-jét a CodePen-en.

Szintaxis

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

Értékek

  • auto: Addig veszi az értéket offset-position, amíg ez az érték szintén nem, autoés addig offset-pathvan , amíg be van állítva none.
  • position
    • : Az egység, amelyet a tartály relatív szélességéből és magasságából számolnak. Például 50% 50%holtpont lenne. Ne feledje, hogy a kulcsszavak itt is működnek, csakúgy, mint background-positionahol center centerugyanez az eredmény adódna.
    • : Olyan egység, amely ellensúlyozza a horgonyt az elem dobozának bal felső sarkából.

Érdemes megjegyezni, hogy positionez egy animálható tulajdonság.

Böngésző támogatás

A offset-*tulajdonságok az írás idején még mindig kísérleti tulajdonságnak számítanak. Ha a böngésző támogatásának jelenlegi hiánya miatt nem hajlandó használni a projektben, akkor érdemes megfontolni a GSAP használatát az animáció ilyen szintjén. Ez a legszélesebb böngészőtámogatást kínálja Önnek.

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
46 72 Nem 79 Nem

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81. Nem

A Chrome 46 és az Opera 33 (és a kapcsolódó mobil verziók) verziójától kezdve a „kezdeti támogatás” van a Blinkben (nincs jelző).

további információ

  • Mozgásút modul 1. szintű specifikáció
  • WebKit jegy # 139128
  • Mozilla jegy # 1186329
  • Microsoft Edge szolgáltatás kérése