CSS offset-path

التعريف والاستخدام

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;

القيمة	الوصف
لا شيء	افتراضي. قيمة offset-path الافتراضية للعنصر.
path()	استخدم لغة SVG لتعريف المسار. انظر:SVG 路径.
ray()	استخدم دالة CSS ray() لتعريف المسار.
url()	استخدم عنوان ملف SVG لتعريف المسار.
<basic-shape>	استخدم الدوال CSS (مثل inset()، circle()، ellipse() أو polygon()) لتعريف الشكل الأساسي لتعريف المسار.
<coord-box>	استخدم قفص الاتجاهات لتعريف المسار.
القيمة الافتراضية	ضع هذا الخصائص في قيمته الافتراضية. انظر القيمة الافتراضية.
وراثي	ينقل هذا الخصائص من عنصر الأب. انظر وراثي.

القيمة الافتراضية:	لا شيء
التنسيق الوراثي:	لا
تحريك الكائن:	يدعم. انظر:خصائص تحريك.
الإصدار:	CSS3
قواعد JavaScript:	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"