Jenereta ya CSS Cubic Bezier

Unda kazi za kurahisisha jenereta ya CSS Cubic Bezier

Pointi za Udhibiti

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Mipangilio maarufu ya Kurahisisha

Pato la CSS

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

Preview

Duration: 500ms

Taswira ya Curve ya 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

Nyaraka za Cubic Bezier

Curve ya Cubic Bezier ni nini?

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.

Sintaksia ya CSS

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

Kesi za Matumizi ya Kawaida

  • Mabadiliko ya uhuishaji:Unda uhuishaji laini kwa vipengele vinavyobadilisha mali.
  • Athari za Kusogeza:Dhibiti kasi ya uhuishaji wa kusogeza.
  • Vipengele vya Maingiliano:Bainisha jinsi vipengele vinavyojibu mwingiliano wa mtumiaji kama vile kuelea au kubofya.
  • Ubunifu wa Mwendo:Tengeneza mfuatano changamano wa mwendo kwa vipengele vya UI.

Kazi maarufu za kurahisisha

Ease (default)

Huanza polepole, huharakisha haraka, na kisha hupungua tena.

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

Linear

Kasi ya mara kwa mara kutoka mwanzo hadi mwisho.

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

Ease-in

Huanza polepole, kisha huharakisha.

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

Ease-out

Huanza haraka, kisha hupungua.

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

Vidokezo vya Kuunda Curves Maalum

  1. Weka maadili ya x kati ya 0 na 1:Maadili nje ya safu hii yanaweza kusababisha tabia isiyotarajiwa.
  2. Taswira ya curve:Tumia grafu shirikishi ili kuelewa jinsi mabadiliko yanavyoathiri uhuishaji.
  3. Jaribu na vitu halisi:Daima hakiki curve yako na vipengele halisi vya UI ili kuhakikisha kuwa inahisi sawa.
  4. Hifadhi mipangilio ya awali:Alamisho mikondo muhimu kwa miradi ya baadaye.

Related Tools

Jenereta ya Mpito ya CSS3

Mpito laini wa opacity

Tengeneza Mabadiliko ya CSS3 kwa Urahisi

Zana yenye nguvu na angavu ya kuunda mabadiliko changamano ya CSS3 bila kuandika msimbo. Taswira ya mabadiliko katika muda halisi na unakili CSS inayozalishwa ili utumie katika miradi yako.

Stylus kwa Kigeuzi cha CSS

Badilisha msimbo wako wa SCSS kuwa CSS. Haraka, rahisi, na salama.

Kigeuzi cha Kitengo cha Misa

Badilisha kati ya vitengo tofauti vya misa kwa usahihi kwa mahitaji yako ya kisayansi na ya kila siku

Ondoa mapumziko ya mstari kutoka kwa maandishi yako

Badilisha maandishi ya mistari mingi kuwa mstari mmoja unaoendelea ukitumia zana yetu ambayo ni rahisi kutumia.

Badilisha TSV hadi JSON kwa urahisi

Badilisha data yako ya TSV kuwa umbizo la JSON lililopangwa kwa mbofyo mmoja. Haraka, salama, na msingi wa kivinjari kabisa.