Những con số thực đằng sau tính năng dễ dàng ra vào CSS
Thiết kế hàm định thời CSS cub-bezier() tùy chỉnh bằng cách kéo hai điểm điều khiển, xem trước trực tiếp dựa trên tham chiếu tuyến tính, sau đó sao chép giá trị sẵn sàng.
kết quả
Trang này mở trình tạo khối-bezier với x1=0,42, y1=0, x2=0,58, y2=1 đã được tải — các điểm kiểm soát chính xác mà từ khóa easy-in-out CSS mở rộng tới. Kéo tay cầm hoặc chỉnh sửa trực tiếp các số và đường cong, bản xem trước hoạt ảnh và chuỗi có thể sao chép đều cập nhật ngay lập tức.
easy-in-out là một trong năm từ khóa tính thời gian CSS tích hợp và nó phổ biến chính xác vì đường cong này tăng tốc nhẹ nhàng ngay từ đầu, giữ tốc độ khá đều ở giữa và giảm dần xuống trước khi kết thúc — một hình dạng có vẻ tự nhiên đối với hầu hết chuyển động trên giao diện người dùng. Xem nó như các điểm kiểm soát rõ ràng thay vì tên từ khóa sẽ giúp bạn hiểu rõ lý do tại sao: y1 nằm gần 0 và y2 nằm gần 1, cả hai đều gần với x trùng khớp của chúng, do đó không có sự vượt quá theo cả hai hướng.
Sử dụng bốn số này làm điểm bắt đầu thay vì chính từ khóa bất cứ khi nào bạn cần di chuyển nhẹ cảm giác - kéo x1 xuống để bắt đầu nhanh hơn hoặc đẩy y2 lên trên 1 để biến hình dạng tương tự này thành một phần vượt quá nhẹ nhàng. Mọi thay đổi đều cập nhật bản xem trước và dòng cub-bezier() có thể sao chép ngay lập tức.