Prawdziwe liczby kryjące się za łatwością obsługi CSS
Zaprojektuj niestandardową funkcję synchronizacji CSS Cube-bezier(), przeciągając dwa punkty kontrolne, wyświetl podgląd na żywo względem odniesienia liniowego, a następnie skopiuj gotową wartość.
Wynik
Ta strona otwiera generator sześciennych bezierów z już załadowanymi x1=0,42, y1=0, x2=0,58, y2=1 — dokładne punkty kontrolne, do których rozwija się słowo kluczowe CSS easy-in-out. Przeciągnij dowolny uchwyt lub bezpośrednio edytuj liczby, a krzywa, podgląd animacji i ciąg znaków, który można skopiować, zostaną natychmiast zaktualizowane.
easy-in-out to jedno z pięciu wbudowanych słów kluczowych synchronizacji CSS i jest popularne właśnie dlatego, że ta krzywa delikatnie przyspiesza na początku, utrzymuje dość równomierne tempo w środku i zwalnia przed końcem — kształt, który brzmi jako naturalny dla większości ruchów interfejsu użytkownika. Postrzeganie tego jako wyraźnych punktów kontrolnych zamiast nazwy słowa kluczowego wyjaśnia, dlaczego: y1 znajduje się w pobliżu 0, a y2 w pobliżu 1, oba blisko odpowiadającego im x, więc nie ma przekroczenia w żadnym kierunku.
Użyj tych czterech liczb jako punktu wyjścia, a nie samego słowa kluczowego, gdy chcesz nieco zmienić wyczucie — pociągnij x1 w dół, aby uzyskać szybszy początek, lub naciśnij y2 powyżej 1, aby zamienić ten sam kształt w delikatne przekroczenie. Każda zmiana natychmiast aktualizuje podgląd i kopiowalną linię sześciennej-bezier().