کدهای جذاب و دیدنی ( Square in circle ) : ساخت لودینگ زیبا با CSS Animation

زمان مطالعه: 1 دقیقه
۱۹ مهر ۱۳۹۶

در این قسمت میخوام یک کد ( Square in circle ) جالب رو در اختیارتون بزارم.

کدهای جذاب و دیدنی ( Square in circle ) : ساخت لودینگ زیبا با CSS Animation

توضیحات مربوط Square in circle

همونطور که دیدید یک حالت و حرکت زیبا انجام میشه و با استفاده از میله های متحرک، یک مربع چرخان در دایره به وجود میاد. میتونین از این لودینگ ایده بگیرید و از اون استفاده کنید.

این کار با استفاده از CSS خالص انجام شده است. در قسمت HTML تعداد 36 المنت قرار گرفته که هر کدام نقش یکی از چوبهای متحرک رو ایفا میکنن. استایل متناسب برای هر چوب قرار داده شده و اون رو در موقعیت مناسب قرار داده و بعد از اون برای هر کدام انیمیشنی رو تعریف کرده و اونا رو هماهنگ با یکدیگر حرکت میده.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل