CSS ফিল্টার জেনারেটর
CSS কিউবিক বেজিয়ার জেনারেটর ইজিং ফাংশন তৈরি করুন
নিয়ন্ত্রণ পয়েন্ট
Point P1 (x1, y1)
Point P2 (x2, y2)
জনপ্রিয় সহজীকরণ প্রিসেট
সিএসএস আউটপুট
Preview
বেজিয়ার বক্ররেখা ভিজ্যুয়ালাইজেশন
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);
সাধারণ ব্যবহারের ক্ষেত্রে
- অ্যানিমেটেড ট্রানজিশন:পরিবর্তন উপাদানগুলির জন্য মসৃণ অ্যানিমেশন তৈরি করুন।
- স্ক্রোল প্রভাব:স্ক্রোল অ্যানিমেশনগুলির গতি নিয়ন্ত্রণ করুন।
- ইন্টারেক্টিভ উপাদান:হোভারিং বা ক্লিক করার মতো ব্যবহারকারীর মিথস্ক্রিয়াগুলিতে উপাদানগুলি কীভাবে প্রতিক্রিয়া জানায় তা সংজ্ঞায়িত করুন।
- মোশন ডিজাইন:ইউআই উপাদানগুলির জন্য জটিল গতি ক্রমগুলি তৈরি করুন।
জনপ্রিয় সহজীকরণ ফাংশনগুলি
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)
কাস্টম বক্ররেখা
- এক্স মানগুলি 0 এবং 1 এর মধ্যে রাখুন:এই সীমার বাইরে মানগুলি অপ্রত্যাশিত আচরণের কারণ হতে পারে।
- বক্ররেখাটি ভিজ্যুয়ালাইজ করুন:পরিবর্তনগুলি অ্যানিমেশনকে কীভাবে প্রভাবিত করে তা বুঝতে ইন্টারেক্টিভ গ্রাফটি ব্যবহার করুন।
- বাস্তব উপাদানগুলির সাথে পরীক্ষা করুন:এটি সঠিক মনে হয় তা নিশ্চিত করার জন্য সর্বদা প্রকৃত ইউআই উপাদানগুলির সাথে আপনার বক্ররেখার পূর্বরূপ দেখুন।
- প্রিসেটগুলি সংরক্ষণ করুন:ভবিষ্যতের প্রকল্পগুলির জন্য দরকারী বক্ররেখাগুলি বুকমার্ক করুন।
Related Tools
স্পিড ইউনিট কনভার্টার
আপনার প্রকৌশল, বৈজ্ঞানিক এবং দৈনন্দিন প্রয়োজনের জন্য নির্ভুলতার সাথে গতির বিভিন্ন ইউনিটের মধ্যে রূপান্তর করুন
SHA-1 হ্যাশ ক্যালকুলেটর
আপনার Sass কোডকে CSS এ রূপান্তর করুন। দ্রুত, সহজ এবং নিরাপদ।
লোন ক্যালকুলেটর
আপনার লেস কোডকে CSS-এ রূপান্তর করুন। দ্রুত, সহজ এবং নিরাপদ।
হেক্স থেকে এইচএসভি
হেক্সাডেসিমেল সংখ্যাগুলিকে অনায়াসে দশমিকে রূপান্তর করুন
CSS স্ক্রোলবার জেনারেটর
আপনার ওয়েবসাইটের জন্য আকর্ষণীয় রিবন ডিজাইন করুন
এইচটিএমএল মিনিফায়ার
আপনার ব্রাউজারে সহজেই HTML এন্টিটিতে টেক্সট এনকোড করুন। ডেভেলপার এবং কন্টেন্ট নির্মাতাদের জন্য উপযুক্ত।