Jenereta ya CSS Cubic Bezier

Buruta mishiko miwili ili kuunda mkondo wa easing, tazama nukta inavyosafiri kulingana na ile thabiti, na unakili thamani ya cubic-bezier().

Vipimo vya Awali
Pointi za kudhibiti
Pointi ya kwanza ya kudhibiti
Pointi ya pili ya kudhibiti
Onyesho la Awali
mkondo wako
linear
Thamani
cubic-bezier(0.25, 0.1, 0.25, 1)
Buruta mshiko au chagua kipimo cha awali ili kuunda mkondo.

Mkondo unachorwa moja kwa moja kwenye kivinjari chako. Hakuna unachoweka hapa kinachopakiwa kwenye BroBroGo.

Maswali Yanayoulizwa Sana

Je, mishiko miwili na nambari nne zinamaanisha nini?

Mkondo unaanzia chini-kushoto (mwanzo) hadi juu-kulia (mwisho), huku muda ukienda kushoto kwenda kulia na maendeleo yakienda juu. Mishiko miwili ndiyo pointi za kudhibiti zinazoipinda — kila moja ina X na Y, kwa hivyo kwa pamoja ni cubic-bezier(x1, y1, x2, y2). X inabaki kati ya 0 na 1, wakati Y inaweza kwenda juu ya kilele au chini ya msingi ili kufanya mwendo upitilize au kurudi nyuma kabla ya kutulia.

Je, ninatumiake thamani hii kwenye CSS yangu?

Nakili cubic-bezier() na uiweke popote ambapo kazi ya muda (timing function) inakwenda — transition-timing-function, animation-timing-function, au kifupi chake, mfano: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Maneno muhimu kama ease, ease-in, ease-out na ease-in-out ni mikondo maalum ya cubic-bezier, kwa hivyo kuchagua mojawapo ya vipimo hivyo vya awali kunakuonyesha thamani halisi iliyo nyuma ya neno hilo kuu.

Je, inaweza kutengeneza athari ya bounce au elastic?

Sio yenyewe pekee. Cubic-bezier moja inaweza kutarajia na kupitiliza (overshoot) — vipimo vya awali vya "back" vinavuta mshiko mmoja kupita kisanduku ili kufanya hivyo — lakini inaweza tu kwenda upande mmoja kisha kutulia. Athari za Bounce na elastic zinabadilisha mwelekeo mara kadhaa, jambo ambalo hakuna cubic-bezier moja inayoweza kueleza; hizo zinahitaji CSS keyframes au linear() function yenye vituo vingi.

Jenereta ya GradientUnda gradient ya linear, radial, au conic, ongeza vituo vya rangi na uweke mwelekeo, kisha unakili CSS kwa mbofyo mmoja.Jenereta ya Border RadiusFanya kila pembe kuwa ya mduara kwa vitelezi, unda maumbo asilia ya blob kwa njia ya duaradufu, na unakili CSS papo hapo.Jenereta ya FlexboxWeka chombo cha flex na vipengele vyake kwa vidhibiti vya macho, tazama mpangilio unavyobadilika moja kwa moja, na unakili CSS kwa mbofyo mmoja.Jenereta ya CSS GridWeka safuwima na safu mlalo zako, buruta kwenye seli ili kuweka vipengele, na unakili CSS ya gridi pamoja na HTML inayolingana kwa mbofyo mmoja.Jenereta ya Box ShadowBuruta vitelezi ili kuunda box-shadow, weka tabaka kwa kina zaidi, na unakili CSS iliyokamilika papo hapo.Kikokotoo cha CSS clamp()Ingiza saizi ya skrini ndogo na kubwa na upate thamani ya clamp() inayobadilika vizuri katikati yake — kwa ajili ya saizi za fonti, padding, margin au gap.