ลูกบาศก์-bezier () ใช้ทําอะไรใน CSS?

ฟังก์ชัน CHAR () จะคืนค่าเป็นอักขระที่มีรหัสตัวเลขตรงกับที่กําหนด มันควบคุมความเร็วของแอนิเมชันเมื่อเวลาผ่านไป ให้คุณสร้างผลกระทบที่เกินความสบายภายใน.

ทําไมค่า y สามารถน้อยกว่า 0 หรือมากกว่า 1 ได้?

ค่า x จะถูก clamped เป็น 0–1 เนื่องจากเวลาไม่สามารถทํางานย้อนหลังได้ แต่ค่า y อาจขยายผ่านช่วง 0-1 เพื่อสร้างค่าเกินค่าและความคาดหวัง นี่คือวิธี 'กลับ' และ 'เด้ง' ที่ปล่อยออกไปชั่วคราวที่ผ่านมาหรือก่อนที่จะกําหนดเป้าหมาย.

ผมจะใช้เส้นโค้งที่สร้างได้อย่างไร?

คัดลอกค่าลูกบาศก์- bezier () เป็นค่าเปลี่ยน หรือการประกาศแบบแอนิเมชัน ตัวอย่างเช่น: การเปลี่ยนแปลง: ทั้ง 0.3s ลูกลูกบาศก์-bezier( 0. 42, 0, 0. 58, 1); เครื่องกําเนิดไฟฟ้ายังส่งผลกระทบ ต่อการทํางานที่พร้อมใช้งาน คุณสามารถวางโดยตรงได้.

เครื่องกําเนิดเสียง CSS

เส้นโค้งแบบ CSS ลูกบาศก์บีซี โดยลากจุดควบคุม และดูการเล่นปล่อยสด แล้วคัดลอกการทํางานตามเวลา.

Drag the control points

x1 y1 x2 y2

Presets

Animation preview

CSS

Was this tool helpful?

Send output to:

How to use Cubic Bezier Generator

ลากจุดควบคุมสีฟ้าและสีชมพูบนเส้นโค้ง, หรือพิมพ์ x1, y1, x2, y2 ในค่านําเข้า.
คลิกชุดสําเร็จรูป เช่น การป้อนข้อมูลแบบง่ายหรือออกแบบง่าย เพื่อโหลดเส้นโค้งที่ทั่วไปหรือมากกว่ายิง.
ดูจุดตัดขวางด้วยการปล่อยของคุณ กดPlay เพื่อเล่นอีกครั้ง แล้วคลิกสําเนา CSS เพื่อคว้ากฎลูกบาศก์.

อะไรคือ?

เครื่องกําเนิดไฟฟ้าแบบลูกบาศก์ เป็นเครื่องมือแก้ไขแบบโต้ตอบสําหรับเส้นโค้งที่ปล่อยของ CSS ลากจุดควบคุมสองจุดบนเส้นโค้งสี่เหลี่ยมหน่วย เพื่อปรับรูปร่างว่าแอนิเมชันเร่งความเร็วและลดความเร็วอย่างไร จากนั้นอ่านค่า translation- imation- barticle- backcode") โดยจะสลับโดยอัตโนมัติ เมื่อคุณเปลี่ยนค่าหรือกดPlay.

การคํานวณทั้งหมดจะเกิดขึ้นในเบราว์เซอร์ของคุณ เมื่อเส้นโค้งนี้รู้สึกว่าถูกต้อง, จงคัดลอกเส้นทางเวลาพร้อมใช้

FAQ

ลูกบาศก์-bezier () ใช้ทําอะไรใน CSS?: ฟังก์ชัน CHAR () จะคืนค่าเป็นอักขระที่มีรหัสตัวเลขตรงกับที่กําหนด มันควบคุมความเร็วของแอนิเมชันเมื่อเวลาผ่านไป ให้คุณสร้างผลกระทบที่เกินความสบายภายใน.
ทําไมค่า y สามารถน้อยกว่า 0 หรือมากกว่า 1 ได้?: ค่า x จะถูก clamped เป็น 0–1 เนื่องจากเวลาไม่สามารถทํางานย้อนหลังได้ แต่ค่า y อาจขยายผ่านช่วง 0-1 เพื่อสร้างค่าเกินค่าและความคาดหวัง นี่คือวิธี 'กลับ' และ 'เด้ง' ที่ปล่อยออกไปชั่วคราวที่ผ่านมาหรือก่อนที่จะกําหนดเป้าหมาย.
ผมจะใช้เส้นโค้งที่สร้างได้อย่างไร?: คัดลอกค่าลูกบาศก์- bezier () เป็นค่าเปลี่ยน หรือการประกาศแบบแอนิเมชัน ตัวอย่างเช่น: การเปลี่ยนแปลง: ทั้ง 0.3s ลูกลูกบาศก์-bezier( 0. 42, 0, 0. 58, 1); เครื่องกําเนิดไฟฟ้ายังส่งผลกระทบ ต่อการทํางานที่พร้อมใช้งาน คุณสามารถวางโดยตรงได้.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Cubic Bezier Generator on Wikipedia·Developer Tools on Wikipedia·Cubic Bezier Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-03

เครื่องกําเนิดเสียง CSS

Something went wrong

How to use Cubic Bezier Generator

อะไรคือ?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts