Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การกำหนดเส้นโค้ง Cubic Bezier ด้วย CSS


เพื่อกำหนดเส้นโค้ง Cubic Bezier ให้ใช้ฟังก์ชัน cubic-bezier() คุณสามารถลองรันโค้ดต่อไปนี้เพื่อนำฟังก์ชัน cubic-bezier() ไปใช้ได้

ตัวอย่าง

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 100px;             height: 100px;             background: yellow;             transition: width 3s;             transition-timing-function: cubic-bezier(0.3, 0.3, 2.0, 0.9);          }          div:hover {             width:200px;          }       </style>    </head>    <body>       <p>Hover over the below container:</p>       <div></div>    </body> </html>