সিএসএস অফসেট-পাথ (মোশন পাথ) সহ একটি বৃত্তাকার পথে একটি উপাদান কীভাবে সরানো যায়?

আমরা CSS অফসেট-পাথ ব্যবহার করে একটি উপাদানের জন্য একটি গতি পথ সংজ্ঞায়িত করতে পারি সম্পত্তি।

CSS অফসেট-পাথ সম্পত্তির সিনট্যাক্স নিম্নরূপ -

সিনট্যাক্স

Selector {
   offset-path: /*value*/
}

নিচের উদাহরণে CSS অফসেট-পাথ প্রপার্টি বোঝায়।

উদাহরণ

<!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>

আউটপুট

এটি নিম্নলিখিত ফলাফল তৈরি করবে -

সিএসএস অফসেট-পাথ (মোশন পাথ) সহ একটি বৃত্তাকার পথে একটি উপাদান কীভাবে সরানো যায়?