Gineadóir Bezier Ciúbach CSS

Cáipéisíocht

Ciúbach Cad is Cuar Bezier Ciúbach ann?

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.

Comhréir

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

CSS Cásanna

Coitianta Aistrithe Beoite:Cruthaigh beochan réidh d'eilimintí a athraíonn airíonna.
Éifeachtaí Scrollaigh:Rialaigh luas na beochan scrollaigh.
Eilimintí Idirghníomhacha:Sainmhínigh conas a fhreagraíonn eilimintí d'idirghníomhaíochtaí úsáideora cosúil le hovering nó cliceáil.
Dearadh Tairiscint:Ceardaigh seichimh ghluaisne casta d'eilimintí Chomhéadain.

Maolaithe Coitianta

Ease (default)

Tosaíonn sé go mall, luasghéaraíonn sé go tapa, agus ansin moillíonn sé arís.

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

Linear

Luas tairiseach ó stealaín chun deiridh.

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

Ease-in

Tosaíonn sé go mall, ansin luasghéarú.

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

Ease-out

Tosaíonn sé go tapa, ansin moillíonn sé.

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

Leideanna maidir le Cuair

a Chruthú Coinnigh x luachanna idir 0 agus 1:Is féidir le luachanna lasmuigh den raon seo a bheith ina chúis le hiompar gan choinne.
Samhlaigh an cuar:Bain úsáid as an ngraf idirghníomhach chun tuiscint a fháil ar an gcaoi a mbíonn tionchar ag athruithe ar an mbeochan.
Tástáil le fíor-eilimintí:Réamhamharc i gcónaí do chuar le comhpháirteanna Chomhéadain iarbhír chun a chinntiú go mbraitheann sé ceart.
Sábháil réamhshocraithe:Leabharmharc cuair úsáideacha do thionscadail amach anseo.