CSS Cubic Bezier generátor

Húzza a két fogantyút az átmeneti görbe formálásához, figyelje a pont mozgását a lineárissal szemben, és másolja ki a cubic-bezier() értéket.

Előbeállítások
Vezérlőpontok
Első vezérlőpont
Második vezérlőpont
Előnézet
az Ön görbéje
linear
Érték
cubic-bezier(0.25, 0.1, 0.25, 1)
Húzza a fogantyúkat vagy válasszon egy előbeállítást a görbe formálásához.

A görbe kirajzolása közvetlenül a böngészőjében történik. Semmilyen beállítás nem kerül feltöltésre a BroBroGo szervereire.

GYIK

Mit jelent a két fogantyú és a négy szám?

A görbe a bal alsó sarokból (kezdet) a jobb felső sarokba (vég) fut, az idő balról jobbra telik, a folyamat előrehaladása pedig felfelé mutat. A két fogantyú a görbületet meghatározó vezérlőpont – mindegyik rendelkezik egy X és egy Y koordinátával, így együttesen alkotják a cubic-bezier(x1, y1, x2, y2) függvényt. Az X értéknek 0 és 1 között kell maradnia, míg az Y túlléphet a felső vagy alsó határon, hogy a mozgás túllőjön vagy visszahúzódjon a megállapodás előtt.

Hogyan használhatom ezt az értéket a CSS-ben?

Másolja ki a cubic-bezier() függvényt, és illessze be oda, ahol időzítési függvényt (timing function) használ – transition-timing-function, animation-timing-function, vagy a rövidített formában, pl. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Az ease, ease-in, ease-out és ease-in-out kulcsszavak csupán fix cubic-bezier görbék, így ezen előbeállítások kiválasztásakor láthatja a kulcsszó mögötti pontos értéket.

Létrehozható vele pattogó vagy rugalmas hatás?

Önmagában nem. Egyetlen cubic-bezier képes előkészítő mozgásra (anticipation) és túllövésre (overshoot) – a „back” előbeállítások pontosan ezt teszik azzal, hogy az egyik fogantyút a dobozon kívülre húzzák –, de csak egy irányba tud elmozdulni, majd megállapodni. A pattogó (bounce) és rugalmas (elastic) hatások többször is irányt váltanak, amit egyetlen cubic-bezier nem képes kifejezni; ezekhez CSS keyframes vagy a sok pontból álló linear() függvény szükséges.

Színátmenet generátorHozzon létre lineáris, radiális vagy kúpos színátmenetet, adjon hozzá színpontokat, állítsa be az irányt, és másolja ki a CSS-t egyetlen kattintással.Border Radius generátorKerekítse le a sarkokat csúszkákkal, hozzon létre organikus amőba alakzatokat az elliptikus móddal, és másolja ki azonnal a CSS-kódot.Flexbox generátorÁllítson be egy flex konténert és elemeit vizuális vezérlőkkel, kövesse az elrendezés élő változását, és másolja ki a CSS-t egyetlen kattintással.CSS Grid generátorÁllítsa be az oszlopokat és sorokat, húzza végig a kurzort a cellákon az elemek elhelyezéséhez, és másolja ki a grid CSS-t a hozzá tartozó HTML-lel egyetlen kattintással.Box Shadow generátorHúzza a csúszkákat a box-shadow alakításához, halmozzon fel rétegeket a mélységért, és másolja ki azonnal a kész CSS-kódot.CSS clamp() kalkulátorAdja meg a kis és nagy képernyőkhöz tartozó méretet, és kapjon egy folyékony clamp() értéket, amely zökkenőmentesen skálázódik a kettő között – betűméretekhez, belső és külső margókhoz vagy résekhez.