Offset-anker - CSS-tricks

Den offset-anchoregenskab definerer et punkt i boksen det anvendes som anker, bevæger sig langs offset-path.

Det er lidt ordrig, så lad os nedbryde det lidt.

Du har et element, sig et felt:

Se Pen Orange Box af Geoff Graham (@geoffgraham) på CodePen.

Du vil have, at boksen skal bevæge sig langs en sti, siger en snoet linje. Vi kan oprette denne linje med SVG direkte i HTML og bruge den som offset-pathboksen. Vi opretter animationen ved at bruge offset-distanceejendommen:

Se Pen Orange Square on Path af Geoff Graham (@geoffgraham) på CodePen.

Godt godt. Men hvad hvis vi vil have kassen til at se ud som om den hænger ud af linjen? Du ved, som en person, der glider langs en lynlås.

Det er her, der offset-anchorkommer ind! Det markerer et sted på elementet og bruger det til at placere elementet på stien.

Her er et eksempel, hvor tre forskellige felter er knyttet til den samme sti på forskellige ankerpunkter:

Se Pen NMbEpy af Geoff Graham (@geoffgraham) på CodePen.

Syntaks

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

Værdier

• auto: Tager en værdi, offset-positionså længe den ikke er, autoog så længe den offset-pather indstillet til none.
• position
  • : En enhed, der beregnes ud fra den relative bredde og højde på containeren, den er i. F.eks. 50% 50%Ville være dødpunkt. Bemærk, at nøgleord fungerer her, ligesom background-positionhvor center centerville returnere det samme resultat.
  • : En enhed, der forskyder ankeret fra det øverste venstre hjørne af elementets kasse.

Det er værd at bemærke, at det positioner en animationsegenskab.

Browsersupport

De offset-*egenskaber er stadig betragtes som en eksperimentel funktion på tidspunktet for dette skrives. Hvis den nuværende mangel på browserstøtte får dig til at tøve med at bruge den til et projekt, kan du overveje at bruge GSAP til dette animationsniveau. Dette giver dig den bredeste browsersupport i øjeblikket.

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome	Firefox	IE	Edge	Safari
46	72	Ingen	79	Ingen

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ingen

Fra og med Chrome 46 og Opera 33 (og de relaterede mobilversioner) har vi "indledende support" i Blink (intet flag).

Yderligere Information

• Motion Path Module Level 1 Specifikation
• WebKit-billet # 139128
• Mozilla-billet # 1186329
• Microsoft Edge-funktionsanmodning