CSS Cubic Bezier Генератор

Повлечете ги двете рачки за да обликувате крива на транзиција, следете го движењето на точката во споредба со рамномерното и копирајте ја вредноста cubic-bezier().

Претпоставки
Контролни точки
Прва контролна точка
Втора контролна точка
Преглед
Вашата крива
linear
Вредност
cubic-bezier(0.25, 0.1, 0.25, 1)
Повлечете рачка или изберете претпоставка за да ја обликувате кривата.

Кривата се исцртува директно во Вашиот прелистувач. Ништо од она што го поставувате тука не се испраќа на BroBroGo.

ЧПП

Што значат двете рачки и четирите броја?

Кривата се движи од долу-лево (почеток) до горе-десно (крај), при што времето тече од лево кон десно, а напредокот оди нагоре. Двете рачки се контролните точки што ја свиткуваат — секоја има X и Y, па заедно се cubic-bezier(x1, y1, x2, y2). X останува помеѓу 0 и 1, додека Y може да оди над врвот или под дното за да направи пречекорување или повлекување на движењето пред да се смири.

Како да ја користам вредноста во мојот CSS?

Копирајте го cubic-bezier() и вметнете го секаде каде што се користи временска функција — transition-timing-function, animation-timing-function или скратената верзија, на пр. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Клучните зборови ease, ease-in, ease-out и ease-in-out се само фиксни cubic-bezier криви, па изборот на некоја од тие претпоставки ви ја покажува точната вредност зад клучниот збор.

Може ли да направи ефект на отскокнување или еластичност?

Не самостојно. Еден cubic-bezier може да направи исчекор наназад и пречекорување — претпоставките „back“ повлекуваат една рачка надвор од рамката токму за тоа — но може да се движи само во една насока и потоа да се смири. Ефектите на отскокнување (bounce) и еластичност ја менуваат насоката неколку пати, што ниту еден поединечен cubic-bezier не може да го изрази; за нив се потребни CSS клучни кадри (keyframes) или функцијата linear() со повеќе точки.

Напишано и проверено од уредничкиот тим на BroBroGo.Последно ажурирано:

Што овозможува алатката CSS Cubic Bezier Генератор

Алатката CSS Cubic Bezier Генератор овозможува визуелно креирање на CSS крива на транзиција преку влечење на две контролни точки. Додека ја прилагодувате кривата, една точка се движи по неа, демонстрирајќи го ефектот на транзиција веднаш до друга точка која се движи со рамномерно темпо. Потоа, алатката ја прикажува соодветната вредност cubic-bezier(), која можете да ја копирате за употреба во вашиот CSS код.

Оваа алатка е наменета за:

  • Секој што сака да креира сопствени ефекти на транзиција за CSS транзиции или анимации.
  • Секој што има потреба да ги разбере точните вредности на cubic-bezier() зад вообичаените клучни зборови за временски функции во CSS, како што се ease, ease-in, ease-out и ease-in-out.
  • Секој што сака да имплементира анимација која го најавува или го пречекорува своето конечно состојба.

Влезни параметри и контроли на генераторот

За да ја обликувате кривата на транзиција, на располагање ги имате следните влезни контроли во интерфејсот:

  • Влечење на две рачки: Овие рачки директно ја контролираат формата на кривата на транзиција.
  • Прва контролна точка X: Нумеричка вредност која мора да биде помеѓу 0 и 1.
  • Прва контролна точка Y: Нумеричка вредност во опсег од -0.70 до 1.70.
  • Втора контролна точка X: Нумеричка вредност која мора да биде помеѓу 0 и 1.
  • Втора контролна точка Y: Нумеричка вредност во опсег од -0.70 до 1.70.
  • Избор на претпоставки (Претпоставки): Можете брзо да изберете некоја од вградените опции како што се „ease“, „ease-in“, „ease-out“, „ease-in-out“, „Back In“, „Back Out“ или „Back In-Out“.

Излезни вредности и визуелизација

Како резултат на вашите прилагодувања, алатката ги генерира и прикажува следните елементи:

  • Вашата крива: Визуелен приказ на самата крива на транзиција.
  • cubic-bezier(x1, y1, x2, y2): Точната вредност на CSS функцијата cubic-bezier() која соодветствува на обликуваната крива.
  • Copied: Статус кој се прикажува откако успешно ќе ја копирате вредноста cubic-bezier(). Процесот на копирање има само состојба на успех и не прикажува експлицитни пораки за одбивање или неуспех.

Правила на однесување, внесување вредности и гранични случаи

При користење на генераторот, важно е да се разберат математичките и практичните правила кои го контролираат неговото однесување:

  • Насока на кривата: Кривата секогаш се движи од долниот лев агол (почеток) до горниот десен агол (крај). Времето напредува од лево кон десно, додека напредокот на анимацијата оди нагоре.
  • Ограничувања на X вредностите: Влезните вредности за X координатите на контролните точки мора строго да останат во опсегот помеѓу 0 и 1. Доколку внесете вредност како 9 за „Прва контролна точка X“ и потоа го тргнете фокусот од полето, вредноста автоматски ќе се претвори во 1.
  • Ограничувања на Y вредностите: Влезните вредности за Y координатите се ограничени помеѓу -0.70 и 1.70. Овие вредности можат да одат над врвот или под дното на рамката за да креираат ефекти на пречекорување (overshoot) или повлекување (pull-back).
  • Контрола со тастатура: Доколку ја фокусирате рачката на некоја контролна точка, со притискање на копчето со стрелка лево (Left arrow) ќе ја промените нејзината вредност, на пример, на 0.99.
  • Празни полиња: Доколку целосно го исчистите нумеричкото поле за внес и го изгубите фокусот, алатката ќе ја врати претходната валидна вредност. Празните или ненумеричките внесови едноставно ќе чекаат да се внесе комплетна вредност.
  • Однесување на претпоставката „Back Out“: Изборот на претпоставката „Back Out“ автоматски ја поставува вредноста на cubic-bezier(0.34, 1.56, 0.64, 1).
  • Ограничување на движењето: Една cubic-bezier функција може да направи исчекор наназад и пречекорување, но може да се движи само во една насока и потоа да се смири. Таа не може да изрази комплексни ефекти кои ја менуваат насоката неколку пати, како што се отскокнување (bounce) или еластичност.

Приватност и обработка на податоци

Вашата приватност е целосно заштитена при користење на оваа алатка. Кривата се исцртува директно во Вашиот прелистувач. Ништо од она што го поставувате тука не се испраќа на BroBroGo.

Често поставувани прашања (FAQ)

Што значат двете рачки и четирите броја?

Кривата се движи од долу-лево (почеток) до горе-десно (крај), при што времето тече од лево кон десно, а напредокот оди нагоре. Двете рачки се контролните точки што ја свиткуваат — секоја има X и Y, па заедно се cubic-bezier(x1, y1, x2, y2). X останува помеѓу 0 и 1, додека Y може да оди над врвот или под дното за да направи пречекорување или повлекување на движењето пред да се смири.

Како да ја користам вредноста во мојот CSS?

Копирајте го cubic-bezier() и вметнете го секаде каде што се користи временска функција — transition-timing-function, animation-timing-function или скратената верзија, на пр. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Клучните зборови ease, ease-in, ease-out и ease-in-out се само фиксни cubic-bezier криви, па изборот на некоја од тие претпоставки ви ја покажува точната вредност зад клучниот збор.

Може ли да направи ефект на отскокнување или еластичност?

Не самостојно. Еден cubic-bezier може да направи исчекор наназад и пречекорување — претпоставките „back“ повлекуваат една рачка надвор од рамката токму за тоа — но може да се движи само во една насока и потоа да се смири. Ефектите на отскокнување (bounce) и еластичност ја менуваат насоката неколку пати, што ниту еден поединечен cubic-bezier не може да го изрази; за нив се потребни CSS клучни кадри (keyframes) или функцијата linear() со повеќе точки.

Генератор на градиентиНаправете линеарен, радијален или коничен градиент, додајте точки на боја, поставете насока и копирајте го CSS-кодот со еден клик.Генератор на Border RadiusЗаоблете го секој агол со лизгачи, обликувајте органски форми со елиптичниот режим и копирајте го CSS-кодот веднаш.Генератор на FlexboxПоставете flex контејнер и неговите елементи со визуелни контроли, следете ги промените во живо и копирајте го CSS-кодот со еден клик.CSS Grid ГенераторПоставете ги Вашите колони и редови, повлечете преку ќелиите за да поставите елементи и копирајте го CSS-кодот за мрежата со соодветниот HTML со еден клик.Генератор на Box ShadowПовлечете ги лизгачите за да обликувате box-shadow, наредете слоеви за длабочина и копирајте го готовиот CSS веднаш.Калкулатор за CSS clamp()Внесете големина за мали и големи екрани и добијте флуидна clamp() вредност што се скалира непречено помеѓу нив — за големини на фонтови, внатрешни и надворешни маргини или празнини.