السلام عليكم
درس اليوم عن طريقة تحريك الصور
مثال الصورة اليوم هو تحريك شخص وجعله يمشي
نبدأ اولا بعمل وسم div بهذا الشكل
رمز Code:
الان ننتقل الى عمل ال css الخاص بنا
رمز PHP:
#man{
background: url(WalkingManSpriteSheet.png);
width: 281px;height: 346px;
-webkit-animation: walk-east 1.0s steps(8) infinite;
animation: walk-east 1.0s steps(8) infinite;
}
@-webkit-keyframes walk-east{
from{background-position: 0px;}
to{background-position: -2252px;}
}
@keyframes walk-east{
from{background-position: 0px;}
to{background-position: -2252px;}
}
شرح ال css
قمنا بتعريف id اسمه man وقمنا استدعاء الصورة
رمز Code:
background: url(WalkingManSpriteSheet.png);
رمز Code:
width: 281px;height: 346px;
قمنا بوضع طول وعرض للصورة
الصورة مألفة من 8 اجزاء وطول الصورة التي استخدمها هي 2252px نقوم بتقسيمها على 8 فيظهر لنا رقم 281px وهذا لظهور جزء واحد فقط من الصورة
رمز Code:
animation: walk-east 1.0s steps(8) infinite;
الان عرفنا animation وجعلنا سرعته 1.0ثانية يمكن ان تغيرها عند الزيادة تصبح ابطأ وعند التقليل تصبح اسرع
steps هو عدد الاجزاء المكونة منها الصورة
infinite ممكن تغيرها لرقم وهنا لجعلها تتحرك دائما
رمز Code:
@keyframes walk-east{
from{background-position: 0px;}
to{background-position: -2252px;}
}
الان نقوم بتعريف keyframe
ونحدد له البداية من 0 والنهاية في عرض الصورة كاملة وهنا استخدمت ( - ) لان اريد ان يمشي من اليسار الى اليمين
رمز Code:
-webkit-animation
@-webkit-keyframes
هذه استخدمت من اجل ان يعمل الكود على google chrom
الصورة والكود موجود في المرفقات
الملفات المرفقة
lib.zip (58.9 كيلوبايت)
المصدر...