CSS افست-پات

تعریف و استفاده

offset-path ویژگی برای ایجاد یک مسیر برای عناصر انیمیشنی استفاده می‌شود.

یک مسیر برای انیمیشن <div> ایجاد کنید:

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

مقدار	توضیح
none	پیش‌فرض. مقدار پیش‌فرض offset-path عنصر.
path()	با استفاده از نحو SVG مسیر را مشخص کنید. لطفاً مراجعه کنید:SVG راستہ.
ray()	با استفاده از توابع CSS ray() مسیر را مشخص کنید.
url()	با استفاده از URL فایل SVG مسیر را مشخص کنید.
<basic-shape>	با استفاده از توابع CSS (مانند inset()،circle()،ellipse() یا polygon()) برای تعریف شکل‌های اساسی مسیر را مشخص کنید.
<coord-box>	با استفاده از جعبه مختصات مسیر را مشخص کنید.
initial	این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. لطفاً مراجعه کنید initial.
inherit	این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً مراجعه کنید inherit.

مقدار پیش‌فرض:	none
ارث‌پذیری:	خیر
انیمیشن制作:	پشتیبانی می‌شود. لطفاً مراجعه کنید:خصوصیات مرتبط با انیمیشن.
نسخه:	CSS3
جملات گرامری جاوااسکریپت:	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"