سلام دوست عزیز😃👋
به مسابقه «مسابقه کداستار ۱۴۰۳ - Front-end» خوش آمدی!
نکات مفید برای شرکت در مسابقه:
chatGPT
و... در مسابقات کوئرا ممنوع است و بعد از شناسایی از لیست شرکتکنندگان مسابقه حذف میشوید.لینکهای مفید برای شرکت در مسابقه:
موفق باشید و بهتون خوش بگذره 😉✌
شرلوک پس از دسترسی به دیتاهای دیتا سنتر وزارت دفاع انگلستان، عکس بهم ریختهای را پیدا کرد که احتمال میدهد همان موریارتی یعنی فرد بمبگذار باشد. شرلوک از شما میخواهد که با استفاده از دانش انیمیشن خود این عکسهای بهم ریخته را مرتب کنید.
ظاهر کلی برنامه به صورت زیر است:
پروژه اولیه را از این لینک دانلود کنید.
ساختار فایلها
ویژگی | زمان | مقدار | |
---|---|---|---|
مدت زمان انیمییشن | - | ۳ ثانیه | |
فاصله از بالا | 50% | 30rem | |
فاصله از چپ | 50% | 30rem | |
فاصله از بالا | 100% | 0rem | |
فاصله از چپ | 100% | 2rem |
ویژگی | زمان | مقدار | |
---|---|---|---|
مدت زمان انیمییشن | - | ۳ ثانیه | |
فاصله از بالا | 50% | 5rem- | |
فاصله از چپ | 50% | 25rem | |
فاصله از بالا | 100% | 25.5rem | |
فاصله از چپ | 100% | 2rem |
ویژگی | زمان | مقدار | |
---|---|---|---|
مدت زمان انیمییشن | - | ۳ ثانیه | |
فاصله از بالا | 50% | 15rem | |
فاصله از چپ | 50% | 15rem | |
فاصله از بالا | 100% | 0rem | |
فاصله از چپ | 100% | 32rem |
ویژگی | زمان | مقدار | |
---|---|---|---|
مدت زمان انیمییشن | - | ۳ ثانیه | |
فاصله از بالا | 50% | 17rem | |
فاصله از چپ | 50% | 15rem | |
فاصله از بالا | 100% | 30.5rem | |
فاصله از چپ | 100% | 26.8rem |
از شما میخواهیم با توجه به توضیحات، مرتب کردن عکس را به کمک انیمیشن در CSS پیادهسازی کنید. قطعات پازل باید به واسطهی یک انیمیشن که با Keyframe
پیادهسازی شده است در کنار یک دیگر قرار بگیرند و تصویر بمبگذار را تشکیل دهند.
Keyframe
هستید. استفاده از transition
مجاز نیست.style.css
هستید.