CSS Kubu Bezier Ġeneratur

Oħloq funzjonijiet ta 'tħaffif tal-Ġeneratur ta' Bezier Kubiku CSS

Punti ta' Kontroll

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Presets ta 'Tħaffif Popolari

Ħruġ tas-CSS

cubic-bezier(0.25, 0.1, 0.25, 1)

Preview

Duration: 500ms

Viżwalizzazzjoni tal-Kurva ta' Bezier

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

Dokumentazzjoni ta 'Cubic Bezier

X'inhi Kurva Kubika ta 'Bezier?

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.

Sintassi CSS

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Każijiet ta 'Użu Komuni

  • Tranżizzjonijiet Animati:Oħloq animazzjonijiet bla xkiel għall-elementi li jbiddlu l-proprjetajiet.
  • Effetti ta 'l-Iscroll:Ikkontrolla l-veloċità tal-animazzjonijiet tal-iscroll.
  • Elementi Interattivi:Iddefinixxi kif l-elementi jirrispondu għall-interazzjonijiet tal-utent bħal hovering jew klikk.
  • Disinn tal-Mozzjoni:Craft sekwenzi ta 'moviment kumplessi għal elementi UI.

Funzjonijiet ta 'Tħaffif Popolari

Ease (default)

Jibda bil-mod, jaċċellera malajr, u mbagħad jerġa' jnaqqas ir-ritmu.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Veloċità kostanti mill-bidu sat-tmiem.

cubic-bezier(0, 0, 1, 1)

Ease-in

Jibda bil-mod, imbagħad jaċċellera.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Jibda malajr, imbagħad inaqqas.

cubic-bezier(0, 0, 0.58, 1)

Ħjiel għall-Ħolqien ta 'Kurvi tad-Dwana

  1. Żomm il-valuri x bejn 0 u 1:Valuri barra minn din il-medda jistgħu jikkawżaw imġieba mhux mistennija.
  2. Viżwalizza l-kurva:Uża l-graff interattiv biex tifhem kif il-bidliet jaffettwaw l-animazzjoni.
  3. Test b'elementi reali:Dejjem ipprevedi l-kurva tiegħek b'komponenti UI attwali biex tiżgura li tħossha tajjeb.
  4. Issejvja l-issettjar minn qabel:Bookmark kurvi utli għal proġetti futuri.

Related Tools

Inqas biex konvertitur CSS

Ittrasforma l-kodiċi Less tiegħek f'CSS. Mgħaġġel, faċli, u sigur.

CSS Minifier

Ikkompressa u ottimizza l-kodiċi CSS tiegħek bi preċiżjoni professjonali

Iġġenera Trasformazzjonijiet CSS3 bil-Faċilità

Għodda qawwija u intuwittiva għall-ħolqien ta 'trasformazzjonijiet CSS3 kumplessi mingħajr ma tikteb kodiċi. Viżwalizza l-bidliet f'ħin reali u kopja s-CSS iġġenerat biex tuża fil-proġetti tiegħek.

Konvertitur tat-timbru tal-ħin

Ikkonverti timestamps bejn formati differenti bil-faċilità

Kalkulatur tal-Età

Ikkalkula l-età eżatta tiegħek fi snin, xhur, u ġranet bil-kalkulatur preċiż tal-età tagħna.

Konvertitur tal-Unità tal-Frekwenza

Ikkonverti bejn unitajiet differenti ta 'frekwenza bi preċiżjoni għall-inġinerija u l-kalkoli xjentifiċi tiegħek