Offset-sidro - CSS-triki

Anonim

offset-anchorLastnost definira točko v polje se uporablja kot sidro, ki se premika vzdolž offset-path.

To je nekako besedno, zato razčistimo malo.

Imate element, recimo polje:

Oglejte si Pen Orange Box Geffa Grahama (@geoffgraham) na CodePen.

Želite, da se to okence premika po poti, recimo napihnjeni črti. To vrstico lahko naredimo s SVG neposredno v HTML-ju in jo uporabimo kot offset-pathpolje. Animacijo ustvarimo z uporabo offset-distancelastnosti:

Oglejte si Pen Orange Square na poti avtorja Geoff Graham (@geoffgraham) na CodePen.

Dobro, dobro. Kaj pa, če želimo, da je škatla videti tako, kot da visi s črte? Veste, kot oseba, ki drsi po zadrgi.

Tu offset-anchorpride! Označi mesto na elementu in ga uporabi za postavitev elementa na pot.

Tu je primer, ko so tri različna polja pritrjena na isto pot na različnih sidriščih:

Oglejte si Pen NMbEpy Geoff Graham (@geoffgraham) na CodePen.

Sintaksa

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

Vrednote

  • auto: Vzame vrednost offset-position, dokler ni ta vrednost tudi autoin dokler offset-pathje nastavljena na none.
  • position
    • : Enota, ki se izračuna iz relativne širine in višine vsebnika, v katerem je. Na primer, bila 50% 50%bi mrtva točka. Upoštevajte, da tukaj delujejo ključne besede, tako kot background-positionkje center centerbi vrnile enak rezultat.
    • : Enota, ki odmika sidro od zgornjega levega kota polja elementa.

Omeniti velja, da positiongre za animacijsko lastnost.

Podpora za brskalnik

V offset-*času pisanja te lastnosti še vedno veljajo za eksperimentalno značilnost. Če vas trenutno pomanjkanje podpore brskalnika omahuje pri uporabi, lahko razmislite o uporabi GSAP za to raven animacije. To vam bo ponudilo trenutno najširšo podporo za brskalnike.

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
46 72 Ne 79 Ne

Mobilni / tablični računalnik

Android Chrome Android Firefox Android iOS Safari
88 85 81 Ne

Od Chrome 46 in Opera 33 (in z njimi povezanih mobilnih različic) imamo »začetno podporo« v Blink (brez zastavice).

Dodatne informacije

  • Specifikacija modula poti gibanja 1
  • Vstopnica za WebKit # 139128
  • Vstopnica za Mozilla # 1186329
  • Zahteva za funkcijo Microsoft Edge