در روز جمعه حوصله ام سر رفته بود و با استفاده از CSS یک تصویر متحرک کوچک و سرگرم کننده ایجاد کردم:
چندین عنصر را با یک تصویر پس‌زمینه که در فواصل زمانی مختلف چرخانده شده‌اند، پوشش می‌دهد. برای تراز کردن تصاویر در یک صفحه و به هم پیوند دادن آنها، ابتدا هر عنصر به عقب چرخانده می شود (با استفاده از :before شبه عنصر) سپس اندازه را تغییر داد و بر اساس آن قرار گرفت.
سپس با اضافه کردن overflow: hidden; به عنصر والد، تصویر به برش داده می شود border-radius ارزش شبه عنصر را می دهد و آن را قادر می سازد شکل بگیرد!
از آنجایی که هر تصویر از نظر فنی در یک موقعیت اما با والد متفاوت است، مقادیر ابعاد و موقعیت باید یکسان باشند. این کمی مشکل بود زیرا ارتفاع و عرض با چرخش های مختلف کمی متفاوت است (به لطف هندسه)، بنابراین تصویر باید کمی کشیده شود.
در اینجا می توانید ببینید که چگونه این کار انجام می شود:
برای انیمیشن از یک ساده استفاده می کند keyframes قانون به انتقال هموار border-radius ارزش های. هر div دارای یک animation-delay مقدار برای جبران و ایجاد یک جلوه جهت.
امیدواریم این ویترین خوبی از ساخت آسان انیمیشن های پیچیده با استفاده از CSS/HTML اولیه باشد!
