CSS ਕਿਊਬਿਕ ਬੇਜ਼ੀਅਰ ਜਨਰੇਟਰ
CSS ਕਿਊਬਿਕ ਬੇਜ਼ੀਅਰ ਜਨਰੇਟਰ ਈਜ਼ਿੰਗ ਫੰਕਸ਼ਨ ਬਣਾਓ
ਕੰਟਰੋਲ ਬਿੰਦੂ
Point P1 (x1, y1)
Point P2 (x2, y2)
ਪ੍ਰਸਿੱਧ ਆਸਾਨ ਪ੍ਰੀਸੈੱਟ
CSS ਆਉਟਪੁੱਟ
Preview
ਬੇਜ਼ੀਅਰ ਕਰਵ ਵਿਜ਼ੂਅਲਾਈਜ਼ੇਸ਼ਨ
x1
y1
x2
y2
ਘਣਬੇਜ਼ੀਅਰਦਸਤਾਵੇਜ਼ Name
ਕਿਊਬਿਕ ਬੇਜ਼ੀਅਰ ਕਰਵ ਕੀ ਹੈ?
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.
CSS ਸੰਟੈਕਸ
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
ਆਮ ਵਰਤੋਂ ਦੇ ਮਾਮਲੇ
- ਐਨੀਮੇਟਡ ਪਰਿਵਰਤਨ:ਤੱਤਾਂ ਦੇ ਗੁਣ ਬਦਲਣ ਲਈ ਨਿਰਵਿਘਨ ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ।
- ਸਕ੍ਰੌਲ ਪ੍ਰਭਾਵ:ਸਕ੍ਰੌਲ ਐਨੀਮੇਸ਼ਨਾਂ ਦੀ ਗਤੀ ਨੂੰ ਕੰਟਰੋਲ ਕਰੋ।
- ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟਸ:ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ ਕਿ ਤੱਤ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ ਜਿਵੇਂ ਕਿ ਹੋਵਰਿੰਗ ਜਾਂ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਕਿਵੇਂ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਦੇ ਹਨ।
- ਮੋਸ਼ਨ ਡਿਜ਼ਾਈਨ:UI ਤੱਤਾਂ ਲਈ ਗੁੰਝਲਦਾਰ ਗਤੀ ਕ੍ਰਮ ਬਣਾਓ।
ਪ੍ਰਸਿੱਧ ਆਸਾਨ ਫੰਕਸ਼ਨ
Ease (default)
ਹੌਲੀ-ਹੌਲੀ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਤੇਜ਼ੀ ਨਾਲ ਤੇਜ਼ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਫਿਰ ਦੁਬਾਰਾ ਹੌਲੀ ਹੋ ਜਾਂਦਾ ਹੈ।
cubic-bezier(0.25, 0.1, 0.25, 1)
Linear
ਸ਼ੁਰੂ ਤੋਂ ਅੰਤ ਤੱਕ ਨਿਰੰਤਰ ਗਤੀ।
cubic-bezier(0, 0, 1, 1)
Ease-in
ਹੌਲੀ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਫਿਰ ਤੇਜ਼ ਹੁੰਦਾ ਹੈ।
cubic-bezier(0.42, 0, 1, 1)
Ease-out
ਤੇਜ਼ੀ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਫਿਰ ਹੌਲੀ ਹੋ ਜਾਂਦਾ ਹੈ।
cubic-bezier(0, 0, 0.58, 1)
ਕਸਟਮ ਕਰਵ ਬਣਾਉਣ ਲਈ ਸੁਝਾਅ
- x ਮੁੱਲ 0 ਅਤੇ 1 ਦੇ ਵਿਚਕਾਰ ਰੱਖੋ:ਇਸ ਸੀਮਾ ਤੋਂ ਬਾਹਰ ਦੇ ਮੁੱਲ ਅਣਕਿਆਸੇ ਵਿਵਹਾਰ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ।
- ਵਕਰ ਦੀ ਕਲਪਨਾ ਕਰੋ:ਤਬਦੀਲੀਆਂ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦੀਆਂ ਹਨ, ਇਹ ਸਮਝਣ ਲਈ ਇੰਟਰਐਕਟਿਵ ਗ੍ਰਾਫ਼ ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਅਸਲ ਤੱਤਾਂ ਨਾਲ ਟੈਸਟ ਕਰੋ:ਹਮੇਸ਼ਾ ਆਪਣੇ ਕਰਵ ਦਾ ਅਸਲ UI ਹਿੱਸਿਆਂ ਨਾਲ ਪੂਰਵਦਰਸ਼ਨ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ ਕਿ ਇਹ ਸਹੀ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ।
- ਪ੍ਰੀਸੈੱਟ ਸੁਰੱਖਿਅਤ ਕਰੋ:ਭਵਿੱਖ ਦੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਉਪਯੋਗੀ ਕਰਵ ਬੁੱਕਮਾਰਕ ਕਰੋ।
Related Tools
ਸੰਪੂਰਨ ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਬਣਾਓ
ਸਾਡੇ ਅਨੁਭਵੀ ਡਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ ਇੰਟਰਫੇਸ ਨਾਲ CSS ਫਲੈਕਸਬਾਕਸ ਕੋਡ ਦੀ ਕਲਪਨਾ ਕਰੋ, ਅਨੁਕੂਲਿਤ ਕਰੋ ਅਤੇ ਤਿਆਰ ਕਰੋ।
ਸਟਾਈਲਸ ਤੋਂ CSS ਕਨਵਰਟਰ
ਆਪਣੇ SCSS ਕੋਡ ਨੂੰ CSS ਵਿੱਚ ਬਦਲੋ। ਤੇਜ਼, ਆਸਾਨ ਅਤੇ ਸੁਰੱਖਿਅਤ।
SCSS ਤੋਂ CSS ਕਨਵਰਟਰ
ਆਪਣੇ SCSS ਕੋਡ ਨੂੰ CSS ਵਿੱਚ ਬਦਲੋ। ਤੇਜ਼, ਆਸਾਨ ਅਤੇ ਸੁਰੱਖਿਅਤ।
ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਊਰਜਾ ਪਰਿਵਰਤਕ
ਵੱਖ-ਵੱਖ ਇਕਾਈਆਂ ਵਿਚਕਾਰ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਊਰਜਾ ਨੂੰ ਸ਼ੁੱਧਤਾ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਬਦਲੋ
ਸਪੀਡ ਯੂਨਿਟ ਕਨਵਰਟਰ
ਆਪਣੀਆਂ ਇੰਜੀਨੀਅਰਿੰਗ, ਵਿਗਿਆਨਕ ਅਤੇ ਰੋਜ਼ਾਨਾ ਦੀਆਂ ਜ਼ਰੂਰਤਾਂ ਲਈ ਸ਼ੁੱਧਤਾ ਨਾਲ ਗਤੀ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਇਕਾਈਆਂ ਵਿਚਕਾਰ ਬਦਲੋ
Less ਤੋਂ CSS ਕਨਵਰਟਰ
ਆਪਣੇ Less ਕੋਡ ਨੂੰ CSS ਵਿੱਚ ਬਦਲੋ। ਤੇਜ਼, ਆਸਾਨ ਅਤੇ ਸੁਰੱਖਿਅਤ।