Εκπαιδευτικό Βιβλίο για το CSS

CSS ιδιότητα

offset-path Η ιδιότητα χρησιμοποιείται για τη δημιουργία μιας διαδρομής για το στοιχείο κίνησης.

Δημιουργήστε μια διαδρομή για την κίνηση <div>:

div {
  offset-path: παράδειγμα('M20,170 L100,20 L180,100 Z');
  κίνηση: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

Τιμή	Περιγραφή
μηδέν	Προεπιλεγμένο. Η προεπιλεγμένη τιμή της ιδιότητας offset-path του στοιχείου.
path()	Χρησιμοποιήστε τη γλώσσα SVG για να καθορίσετε το δρομολόγιο. Δείτε:SVG 路径.
ray()	Χρησιμοποιήστε τη συνάρτηση CSS ray() για να καθορίσετε το δρομολόγιο.
url()	Χρησιμοποιήστε το URL του αρχείου SVG για να καθορίσετε το δρομολόγιο.
<basic-shape>	Χρησιμοποιήστε τις συνάρτησεις CSS (όπως inset(), circle(), ellipse() ή polygon()) για να καθορίσετε βασικές μορφές για το δρομολόγιο.
<coord-box>	Χρησιμοποιήστε το πλαίσιο συντεταγμένων για να καθορίσετε το δρομολόγιο.
initial	Ρυθμίστε αυτή την ιδιότητα στην προεπιλεγμένη της τιμή. Δείτε: initial.
κληρονομικότητα	Κληρονομείται από το γονικό στοιχείο. Δείτε: κληρονομικότητα.

Προεπιλεγμένος τιμή:	μηδέν
Κληρονομικότητα:	Όχι
Κίνηση δημιουργίας:	Υποστήριξη. Δείτε:Αντικειμενικές ιδιότητες κίνησης.
Έκδοση:	CSS3
Γλώσσα JavaScript:	object.style.offsetPath="παράδειγμα('M20,170 L100,20 L180,100 Z')"

Τα αριθμήματα στην τάβληση δείχνουν την έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει αυτό το χαρακτηριστικό.

Χρωμόσωμα	Εντένεια	Φαξ	Σαφάρι	Οπερα
55	79	72	15.4	45