شرلوک پس از دسترسی به دیتا‌های دیتا سنتر وزارت دفاع انگلستان، عکس بهم ریخته‌ای را پیدا کرد که احتمال می‌دهد همان موریارتی یعنی فرد بمب‌گذار باشد. شرلوک از شما می‌خواهد که با استفاده از دانش انیمیشن خود این عکس‌های بهم ریخته را مرتب کنید.
ظاهر کلی برنامه به صورت زیر است:
پروژه اولیه
پروژه اولیه را از این لینک دانلود کنید.
ساختار فایل‌ها
Moriarty
├── assets
│ ├── puzzle1.png
│ ├── puzzle2.png
│ ├── puzzle3.png
│ └── puzzle4.png
├── style
│ ├── style.css
├── template
│ ├── index.html
توضیحات
تصویر اول
| ویژگی | زمان | مقدار | |
|---|---|---|---|
| مدت زمان انیمییشن | - | ۳ ثانیه | |
| فاصله از بالا | 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هستید. - برای بارگذاری، فایل style.css را به تنهایی ارسال کنید.
ارسال پاسخ برای این سؤال