ایجاد Loading با CSS3



visibility  
mode_comment   ۲۰

حتما شما تا به حال دیده اید که وقتی صفحه ای در حال بارگذاری است ، گاهی اوقات یک تصویر GIF برای شما ظاهر می شود ،که نشان دهنده بارگذاری صفحه می باشد ، ما در این قسمت قصد داریم این تصویر را با با استفاده از CSS3 ایجاد نمائیم .

در ابتدا برای مشاهده خروجی کلیک نمائید!

در ابتدا یک تگ Style ایجاد نمائید ، سپس کد زیر را درون آن قرار دهید :

حال وقت توضیح دادن خط به خط کد می باشد :

در ابتدا یک کلاس loading ایجاد نموده ایم ، که display آن را برابر با inline قرار داده ایم ، یعنی به صورت افقی به نمایش در بیاید.سپس با استفاده از دستور moz-animation سرعت انیمشن را تنظیم نموده ایم .

info نکته :

در بخش animation نام loading را فراخوانی نموده ایم ، این نام همان نامی است که با استفاده از دستور keyframes به بخش انیمشین خود اختصاص داده ایم.

info نکته :

خاصیت infinite alternate باعث می شود ، تصویر ما پی در پی اجرا شود.

nth-of-type : همانطور که شما خروجی کد فوق را مشاهده نمودید ، ما دارای سه توپ انیمیشنی هستیم ، با استفاده از دستور nth-of-type هر تو را با استفاده از شماره یعنی 1 و 2 و 3 مشخص می کنیم و به آن ها دستورات خود را اضافه می نمائیم .

بخش اصلی انیمیشن ما :

برای ایجاد تحرک یا انیمشین در css3 از دستور keyframes استفاده می شود :

همانطور که کد فوق را مشاهده نمودید ، ما با استفاده از دستور keyframes نام کلاس خود را فراخوانی نموده ایم . قسمت های 0 درصد نقطه شروع انیمیشن ما هستند و قسمت های 100 درصد نقطه پایان انیمیشن می باشند .( در این دو قسمت شما می توانید کد های مورد نظر خود را تایپ نمائید).

دستور translateY باعث می شود توپ ها در مکان های مختلفی جا به جا شوند.

سپس با استفاده از دستور فوق می توانید style خود را فراخوانی نمائید :

سوالی داشتید حتما در قسمت نظرات بپرسید!!!

comment دیدگاه کاربران
meraj

سلام.
خیلی خوب بود فقط میشه کد قرار دادن لودینگ در صفحه رو بزارید تا از این آموزش استفاده کنیم؟
ممنون.

میلاد حیدری

به روی چشم!!!

فتوحی

سلام خسته نباشید
یه سوال: یعنی این کدها الان به زبان سی شارپه؟ کاش بیشتر تو زمینه ی ASP.net و VB کار میکردین، من خیلی بهش نیاز دارم
لطفا فرم نظردهی به سایت و طریقه اتصال به ایمیل از طریق سایت رو به زبان ASP.net و VB رو برام بنویسید، ممنون میشم و دعاگوتون.

میلاد حیدری

دوست عزیز این ها کد های css و css3 هستند . سی شارپ؟؟؟!!!

در ضمن با عرض پوزش فعلا برنامه ای برای asp.net نداریم

mch@

سلام
دوست عزیز،میشه بفرمایید دقیقا چه کدی رو میخواید؟منظورم کد ویژوال هست که تو نظرتون گفتید
ممنون

فتوحی

خیلی ممنون که وقت گذاشتید و جوابمو دادید 😳
آخه من مبتدی هستم و خیلی عجله ای واسه پایان نامم دارم یه سایت فروشگاه الکترونیکی طراحی میکنم البته یه کلاس مقدماتی فشرده رفتم که فقط در حد آشنایی و ناقص بود، شرمنده آخه این زبانها و کدها و … رو با هم قاطی کردم رفت 😥

من دقیقا کد کامل نظردهی توی سایت رو میخام(مثل همین کاری که الان دارم انجام میدم اینجا) کامنت گذاشتن، البته کجا بذارم و اتصالات و ایناشم نمیدونم 🙁
همچنین کدنویسی ارسال به ایمیل و اینکه کجای کدها بذارم و چطوری اتصال بدمش به سرور و کلاً ارسال ایمیل
باید پایان ناممو به زبون ASP.NET و ویژوال بیسیک بنویسم، تا آخر مرداد هم باید تحویلش بدم 😐
اتفاقاتی افتاد که من تا الان نتونستم طراحی سایتمو جدی دنبال کنم واسه همین مزاحم وقت شریف شماها شدم، ببخشید اگه با سوالام خستتون میکنم ولی بدونین که اجرتون پیش خدا محفوظه آخه زکات علم یاد دادن اون به دیگرانه.

لقمان آوند

سلام
خواهش میکنم . ما تا جایی که وقتمون اجازه بده پاسخ دوستان رو میدیم . ولی متاسفانه باید بگم که ما در زمینه ASP وASP.NET تخصصی نداریم و از این لحاظ کمکی نمیتونیم بکنیم . سرچ کنید . ان شاءالله که منابع بهتری در این زمینه پیدا خواهید کرد .

احسان امیدی

سلام آقا لقمان چرا مطلب من هنوز تایید نشده؟؟؟ 😕
اگه مطالب رو نمیخواید بگید…..

لقمان آوند

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

فتوحی

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

سامان

سلام دوست عزیز .
میتونی به این صفحه مراجعه کنی
http://www.poroje.bia2internet.com/proje.aspx?id=51

میلاد حیدری

خواهیش میکنم ، ممنون از معرفی کتاب ها

ریحانی

می خواستم خواهش کنم یک کدی برای من محبت کنید که مانند css هایی که کنار صفحه می آد و به صفحه ی دیگه اشاره می کنه
css عمودی وسط صفحه
ممنون

میلاد حیدری

ببخشید ولی من نفهمیدم چی شد؟؟؟

سامان

منظور آقا/خانم ریحانی اینه که لینکهای هایی که جاشون رو صفحه پابته و با حرکت اسکرول،حرکت نمیکنن و یه جا ثابتن.

ریحانی

برخی سایت ها کنار صفحه خودشان کنار اسکرول بار یک سی اس اس دارن که به صفحه ایی خاص اشاره می کند

hesam.s.pc

salam
ببینم من از کجا میتونم نرم افزارcss3 lodingرو دانلود کنم؟
لطفا سریع

psdk

یه سر به سایت زیر بزنید خیلی راحت میتونید لودینگ بسازید با css و کدشو بگیرین و استفاده کنید
http://cssload.net/
😀 😀 😉 😉 💡

R0nika

سلام
میشه آموزش بخش pseudo classe در CSS رو هم بذارید؟
ممنون از زحماتتون

میلاد حیدری

بله حتما ، ان شاالله یک جلسه را به این محبث یعنی شبه کلاس ها در css خواهیم داد ، اما اگر بخواهم برای شما دوست عزیز در همین جا یک توضیح کوتاه بدهم ، Pseudo-classes انواع حالت ها رو مشخص میکنند ، مثلا فرض کنید که شما میخواهید یک متنی را ایجاد نمائید که وقتی اشاره گر ماوس رو آن قرار گرفت به رنگ قرمز تبدیل شود ، برای اینکار از حالت hover استفاده می کنید و یا…. موضوعات دیگر ، در css حدودا 10 ، شبه کلاس وجود داره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.