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%; }
}

جرب بنفسك

جملة CSS

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
جافا سكربت الجملة: object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم الخاصية لأول مرة.

كروم إدج فايرفوكس سفاري أوبرا
55 79 72 15.4 45

صفحة ذات الصلة

دروس:مسار SVG

دروس:حركة CSS

المرجع:CSS offset الخاصية

المرجع:CSS offset-anchor الخاصية

المرجع:CSS offset-distance الخاصية

المرجع:CSS offset-position الخاصية

المرجع:CSS offset-rotate الخاصية