διακοπής Σημεία ελέγχου Δημοφιλείς
Point P1 (x1, y1)
Point P2 (x2, y2)
προεπιλογές
χαλάρωσης Έξοδος
Preview
CSS Οπτικοποίηση
x1
y1
x2
y2
Bezier Κυβική τεκμηρίωση Bezier Τι
είναι η κυβική καμπύλη Bezier;
A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.
Σύνταξη
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
Συνήθεις περιπτώσεις
- Κινούμενες μεταβάσεις:Δημιουργήστε ομαλές κινούμενες εικόνες για στοιχεία που αλλάζουν ιδιότητες.
- εφέ κύλισης:Ελέγξτε την ταχύτητα των κινούμενων εικόνων κύλισης.
- Αλληλεπιδραστικά στοιχεία:Καθορίστε τον τρόπο με τον οποίο τα στοιχεία ανταποκρίνονται στις αλληλεπιδράσεις των χρηστών, όπως η κατάδειξη ή το κλικ.
- Σχεδιασμός κίνησης:Δημιουργήστε σύνθετες ακολουθίες κίνησης για στοιχεία διεπαφής χρήστη.
Δημοφιλείς λειτουργίες
Ease (default)
Ξεκινά αργά, επιταχύνει γρήγορα και στη συνέχεια επιβραδύνεται ξανά.
cubic-bezier(0.25, 0.1, 0.25, 1)
Linear
Σταθερή ταχύτητα από την αρχή μέχρι το τέλος.
cubic-bezier(0, 0, 1, 1)
Ease-in
Ξεκινά αργά, στη συνέχεια επιταχύνει.
cubic-bezier(0.42, 0, 1, 1)
Ease-out
Ξεκινά γρήγορα, στη συνέχεια μειώνεται.
cubic-bezier(0, 0, 0.58, 1)
Συμβουλές για τη δημιουργία προσαρμοσμένων
- Διατηρήστε τις τιμές x μεταξύ 0 και 1:Οι τιμές εκτός αυτού του εύρους μπορεί να προκαλέσουν απροσδόκητη συμπεριφορά.
- Οπτικοποίηση της καμπύλης:Χρησιμοποιήστε το διαδραστικό γράφημα για να κατανοήσετε πώς οι αλλαγές επηρεάζουν την κινούμενη εικόνα.
- Δοκιμή με πραγματικά στοιχεία:Να κάνετε πάντα προεπισκόπηση της καμπύλης σας με πραγματικά στοιχεία περιβάλλοντος εργασίας χρήστη για να βεβαιωθείτε ότι αισθάνεται σωστά.
- Αποθήκευση προκαθορισμένων ρυθμίσεων:Προσθήκη σελιδοδεικτών σε χρήσιμες καμπύλες για μελλοντικά έργα.
Related Tools
Μετατροπέας SCSS σε CSS
Μετατρέψτε τον κώδικα SCSS σε CSS. Γρήγορα, εύκολα και με ασφάλεια.
Δημιουργήστε Όμορφες Διαβαθμίσεις CSS Χωρίς Κακό
Δημιουργήστε εκπληκτικές γραμμικές, ακτινικές και κωνικές κλίσεις με τη διαισθητική διεπαφή μας. Αντιγράψτε τον κώδικα CSS και χρησιμοποιήστε τον στα έργα σας αμέσως.
Μετατροπέας γραφίδας σε CSS
Μετατρέψτε τον κώδικα SCSS σε CSS. Γρήγορα, εύκολα και με ασφάλεια.
Οκταδικό σε Δεκαδικό
Μετατροπή οκταδικών αριθμών σε δεκαδικούς χωρίς
Δημιουργία τυχαίων λέξεων για οποιονδήποτε σκοπό
Δημιουργήστε τυχαίες λέξεις με προσαρμοσμένες επιλογές μήκους, πολυπλοκότητας και μορφοποίησης.
Μετατροπέας ρυθμού
κόπο Μετατρέψτε εύκολα τον ρυθμό τρεξίματος μεταξύ διαφορετικών μονάδων και υπολογίστε τον εκτιμώμενο χρόνο και την απόσταση