سی ایس ایس کیوبک بیزیئر جنریٹر
سی ایس ایس کیوبک بیزیئر جنریٹر کو آسان کرنے کے افعال بنائیں
کنٹرول پوائنٹس
Point P1 (x1, y1)
Point P2 (x2, y2)
مقبول آسان پیش سیٹ
سی ایس ایس آؤٹ پٹ
Preview
Bezier منحنی تصور
x1
y1
x2
y2
کیوبک بیزیئر دستاویزات
کیوبک بیزیئر وکر کیا ہے؟
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);
عام استعمال کے معاملات
- متحرک ٹرانزیشنز:خصوصیات کو تبدیل کرنے والے عناصر کے لئے ہموار متحرک تصاویر بنائیں۔
- اسکرول اثرات:اسکرول اینیمیشن کی رفتار کو کنٹرول کریں۔
- انٹرایکٹو عناصر:اس بات کی وضاحت کریں کہ عناصر صارف کے تعاملات جیسے منڈلانا یا کلک کرنے کا جواب دیتے ہیں۔
- موشن ڈیزائن:UI عناصر کے لیے پیچیدہ حرکت کی ترتیب تیار کریں۔
مقبول آسانی کے افعال
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 کے درمیان رکھیں:اس حد سے باہر کی قدریں غیر متوقع رویے کا سبب بن سکتی ہیں۔
- وکر کو تصور کریں:یہ سمجھنے کے لیے انٹرایکٹو گراف کا استعمال کریں کہ تبدیلیاں کس طرح حرکت پذیری کو متاثر کرتی ہیں۔
- اصلی عناصر کے ساتھ ٹیسٹ:اپنے منحنی خطوط کا ہمیشہ حقیقی UI اجزاء کے ساتھ پیش نظارہ کریں تاکہ یہ یقینی بنایا جا سکے کہ یہ صحیح محسوس ہوتا ہے۔
- پیش سیٹ محفوظ کریں:مستقبل کے منصوبوں کے لیے مفید منحنی خطوط کو بُک مارک کریں۔
Related Tools
اسٹائلس ٹو سی ایس ایس کنورٹر
اپنے SCSS کوڈ کو CSS میں تبدیل کریں۔ تیز، آسان اور محفوظ۔
سس ٹو سی ایس ایس کنورٹر
اپنے Sass کوڈ کو CSS میں تبدیل کریں۔ تیز، آسان اور محفوظ۔
سی ایس ایس منیفائر
پیشہ ورانہ درستگی کے ساتھ اپنے CSS کوڈ کو سکیڑیں اور بہتر بنائیں
اپنے ڈیزائن کے لیے ڈمی ٹیکسٹ تیار کریں۔
ہمارے Lorem Ipsum جنریٹر کے ساتھ اپنی ویب سائٹس، ایپس اور دستاویزات کے لیے حقیقت پسندانہ پلیس ہولڈر ٹیکسٹ بنائیں۔
نمبر ٹو ورڈ کنورٹر
عددی اقدار کو متعدد زبانوں میں ان کے الفاظ کی نمائندگی میں تبدیل کریں۔
جاوا اسکرپٹ منیفائر
اپنے JavaScript کوڈ کو پروفیشنل گریڈ منیفیکیشن کے ساتھ کمپریس اور بہتر بنائیں۔ فائل کا سائز کم کریں، لوڈ ٹائم کو بہتر بنائیں، اور اپنی ویب ایپلیکیشنز کی کارکردگی کو بہتر بنائیں۔