Dhaliyaha CSS Cubic Bezier

Jiid labada gacan si aad u qaabayso qalooca, daawo dhibic raacaysa marka la barbardhigo mid joogto ah, oo koobiyeey qiimaha cubic-bezier().

Hababka Diyaarsan
Dhibcaha xakamaynta
Dhibicda kowaad ee xakamaynta
Dhibicda labaad ee xakamaynta
Hor-u-arag
qaloocaaga
linear
Qiimaha
cubic-bezier(0.25, 0.1, 0.25, 1)
Jiid gacan ama dooro hab diyaarsan si aad u qaabayso qalooca.

Qalooca waxaa si toos ah loogu sawiraa biraawsarkaaga. Waxba oo aad halkan ku dejiso looma soo gudbiyo BroBroGo.

Su'aalaha badanaa la isweydiiyo

Maxay ka dhigan yihiin labada gacan iyo afarta lambar?

Qaloocu wuxuu ka bilaabmaa bidix-hoose (bilowga) ilaa midig-sare (dhamaadka), iyadoo waqtigu u socdo bidix ilaa midig horumarkuna uu kor u kacayo. Labada gacan waa dhibcaha xakamaynta ee qaloociya — mid kastaa wuxuu leeyahay X iyo Y, markaa wadajir waxay u yihiin cubic-bezier(x1, y1, x2, y2). X wuxuu u dhexeeyaa 0 iyo 1, halka Y uu aadi karo ka sarreeya dusha sare ama ka hooseeya salka si uu dhaqdhaqaaqu u dhafo (overshoot) ama dib u soo jiido ka hor inta uusan dagi lahayn.

Sideen ugu isticmaalaa qiimaha CSS-kayga?

Koobiyeey cubic-bezier() oo ku tuur meel kasta oo ay gasho timing function — transition-timing-function, animation-timing-function, ama qaabka gaaban, tusaale ahaan transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Erayada muhiimka ah ee ease, ease-in, ease-out iyo ease-in-out waa uun qaloocyo cubic-bezier oo go'an, markaa doorashada mid ka mid ah hababkaas diyaarsan waxay ku tusaysaa qiimaha saxda ah ee ka dambeeya erayga muhiimka ah.

Miyaa lagu samayn karaa saamaynta bounce ama elastic?

Kaliya kaligiis ma sameyn karo. Hal cubic-bezier wuxuu filan karaa oo dhaafi karaa (overshoot) — hababka diyaarsan ee "back" waxay jiidayaan hal gacan si ay taas u sameeyaan — laakiin wuxuu u dhaqaaqi karaa hal dhinac oo keliya ka dibna wuu dagi karaa. Bounce iyo elastic waxay beddelaan jihada dhowr jeer, taas oo aanu hal cubic-bezier muujin karin; kuwaas waxay u baahan yihiin CSS keyframes ama linear() function oo leh istaago badan.

Dhaliyaha GradientDhis gradient linear, radial, ama conic ah, ku dar istaagyada midabka oo dejiso jihada, ka dibna ku koobiyeey CSS-ka hal gujin.Dhaliyaha Border RadiusU wareeji gees kasta adigoo isticmaalaya jiidado, ku qaabeey qaabab dabiici ah habka elliptical-ka, oo si degdeg ah u koobiyeey CSS-ka.Dhaliyaha FlexboxU diyaari weel flex ah iyo walxihiisa adigoo isticmaalaya xakamaynta muuqaalka, daawo qaabka oo si toos ah u falcelinaya, oo ku koobiyeey CSS-ka hal gujin.Dhaliyaha CSS GridDejiso tiirarkaaga iyo safarkaaga, ku jiid unugyada dushooda si aad u dhigto walxaha, oo ku koobiyeey grid CSS-ka iyo HTML-ka u dhigma hal gujin.Dhaliyaha Box ShadowJiid jiidadaha si aad u qaabayso box-shadow, isku dul radd lakabyo si aad u hesho qoto-dheer, oo si degdeg ah u koobiyeey CSS-ka dhammaaday.Xisaabiyaha CSS clamp()Geli cabbir loogu talagalay shaashadaha yaryar iyo kuwa waaweyn si aad u hesho qiimo dabiici ah oo clamp() ah oo si habsmooth ah ugu dhex miisaamaya — ee cabbirrada farta, padding, margins ama gaps.