Ġeneratur ta' CSS Cubic Bezier

Drag iż-żewġ manki biex tifforma kurva ta' easing, ara tikka timxi magħha mqabbla ma' waħda b'veloċità kostanti, u kkopja l-valur cubic-bezier().

Presets
Punti ta' kontroll
L-ewwel punt ta' kontroll
It-tieni punt ta' kontroll
Preview
il-kurva tiegħek
linear
Valur
cubic-bezier(0.25, 0.1, 0.25, 1)
Drag manku jew agħżel preset biex tifforma l-kurva.

Il-kurva tiġi ġġenerata direttament fil-browser tiegħek. Xejn minn dak li tikkonfigura hawn ma jiġi mtella' fuq BroBroGo.

Mistoqsijiet Frekwenti

Xi jfissru ż-żewġ manki u l-erba' numri?

Il-kurva timxi minn isfel-xellug (il-bidu) għal fuq-lemin (it-tmiem), bil-ħin miexi mix-xellug għal-lemin u l-progress miexi 'l fuq. Iż-żewġ manki huma l-punti ta' kontroll li jgħawġuha — kull wieħed għandu X u Y, u għalhekk flimkien huma cubic-bezier(x1, y1, x2, y2). X jibqa' dejjem bejn 0 u 1, filwaqt li Y jista' jmur 'il fuq mill-quċċata jew taħt il-qiegħ biex joħloq moviment li jaqbeż il-mira jew jiġbed lura qabel ma jieqaf.

Kif nista' nuża l-valur fis-CSS tiegħi?

Ikkopja l-cubic-bezier() u poġġih fejn trid tuża timing function — transition-timing-function, animation-timing-function, jew fil-forma mqassra, eż. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Il-kliem ewlieni ease, ease-in, ease-out u ease-in-out huma biss kurvi cubic-bezier fissi, għalhekk meta tagħżel wieħed minn dawk il-presets tara l-valur eżatt wara l-kelma ewlenija.

Jista' joħloq effett ta' bounce jew elastiku?

Mhux waħdu. Cubic-bezier wieħed jista' jantiċipa u jaqbeż il-mira (overshoot) — il-presets "back" jiġbdu manku wieħed lil hinn mill-kaxxa biex jagħmlu preċiżament dan — iżda jista' jimxi biss f'direzzjoni waħda u mbagħad jieqaf. Effetti ta' bounce u elastiċi jibdlu d-direzzjoni diversi drabi, u dan ma jistax jiġi espress b'cubic-bezier wieħed; dawk jeħtieġu keyframes tas-CSS jew il-funzjoni linear() b'ħafna waqfiet.

Ġeneratur ta' GradjentiIbni gradjent lineari, radjali, jew koniku, żid waqfiet tal-kulur u ssettja d-direzzjoni, imbagħad ikkopja s-CSS bi klikk waħda.Ġeneratur ta' Border RadiusIttundja kull kantuniera bi sliders, oħloq forom organiċi bil-mod ellittiku, u kkopja s-CSS istantanjament.Ġeneratur ta' FlexboxIkkonfigura kontenitur flex u l-oġġetti tiegħu b'kontrolli viżwali, ara t-tqassim jirreaġixxi f'ħin reali, u kkopja s-CSS bi klikk waħda.Ġeneratur ta' CSS GridIssettja l-kolonni u r-ringieli tiegħek, drag fuq iċ-ċelloli biex tpoġġi l-oġġetti, u kkopja s-CSS tal-grid flimkien mal-HTML korrispondenti bi klikk waħda.Ġeneratur ta' Box ShadowDrag is-sliders biex tifforma box-shadow, żid is-saffi għal aktar fond, u kkopja s-CSS lest istantanjament.Kalkolatur ta' CSS clamp()Daħħal daqs għal skrins żgħar u kbar u rċievi valur fluwidu clamp() li jiskala b'mod uniformi bejniethom — għal daqsijiet ta' tipa, padding, margins jew gaps.