CSS offset-path প্রোপার্টি ব্যবহার করে আমরা একটি এলিমেন্টের জন্য মোশন পথ সংজ্ঞায়িত করতে পারি।
CSS offset-path প্রোপার্টির সিনট্যাক্স নিচের মতো −
সিনট্যাক্স
Selector { offset-path: /*value*/ }
নিচের উদাহরণটি CSS offset-path প্রোপার্টি প্রদর্শন করে।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { margin: 5%; width: 35px; height: 35px; offset-path: path('M70,0 A70,70 0 1,1 70,140 A70,70 0 1,1 70,0'); animation: round 3000ms infinite ease-in-out; background: darkseagreen; border-radius: 30%; } @keyframes round { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } </style> </head> <body> <hr/> <div></div> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
