خیلی از ماها سایت هایی رو دیدیم که وقتی باز میکنیم در ابتدا لودینگ‌ (preloader) فلت متحرک به شکل زیبا اولش به نمایش درمیاد.حالا ما میخوایم به شما آموزش بدیم که چطوری با Css3 بیایم از این loading های متحرک به سبک فلت طراحی کنیم.

 

پیش نیاز هایی که باید یاد بگیرید …

قبل از اینکه از همه ، ابتدا ما چند صفت از CSS3 که ضرورتی برای ساختن این نوع از preloader ها  هستند را شرح میدیم.

 

شبه عناصر before: و after:

شبه عناصر :before و :after همونطور که هم که از اسمشون پیداست میتونند در اول و آخر یک عنصر، عنصر جدیدی ایجاد کنند تا به وسیله ی اون بتونیم کنترل بیشتری برای استایل دادن به عناصر HTML داشته باشیم. برای اطلاعات بیشتر می تونید  “CSS ::before Selector ” و ” CSS ::after Selector ” رو مشاهده کنید.

 

انیمیشن CSS3

وقتی که شما استایل های CSS را داخل قانون @keyframes مشخص می کنید، انیمیشن به تدریج در زمانی که مشخص شده از استایل فعلی به استایل جدید تغییر می یابد.برای دریافت یک تصویر متحرک، باید انیمیشن را به عنصر مرتبط کنید. ” آشنایی با انیمیشن ها

 

نمونه 1 – لودینگ حالت مربع دایره ای

 

 

demo

 

 

اول – Html

این با استفاده کردن از چهار محدوده(span) ساخته شده. هرکدام یک دایره/مربع هست و خودش یک خود تحرکی بکار رفته در آن دارد.

 

 

دوم – Css

 

 

 

 

نمونه 2 – لودینگ حالت موج رادیویی

 

 

demo

 

اول – Html

این بوسیله ساختن پنج محدوده(span) دست یافته شده ، هرکدام به نمایندگی یک میله رادیوئی.

 

 

 

دوم – Css

جلوه به وسیله حرکت دادن عرض هر محدوده از 5px به 30px دست یافته شده. همچنین محدوده روی شاخص عمودی(Y) بوسیله 15px برای جلوه دادن اینکه آن از مرکز نمو داده شده حرکت می کند.

 

 

 

امیدوارم که از این آموزش لذت برده باشید  ♥