حتما شما تا به حال دیده اید که وقتی صفحه ای در حال بارگذاری است ، گاهی اوقات یک تصویر GIF برای شما ظاهر میشود ،که نشان دهنده بارگذاری صفحه میباشد ، ما در این قسمت قصد داریم این تصویر را با با استفاده از CSS3 ایجاد نمائیم .
در ابتدا برای مشاهده خروجی کلیک نمائید!
در ابتدا یک تگ Style ایجاد نمائید ، سپس کد زیر را درون آن قرار دهید :
<style type="text/css"> .loading { text-align: center; } .loading span { display: inline-block; vertical-align: middle; width: 10px; height: 10px; margin: 50px auto; background: blue; border-radius: 50px; -webkit-animation: loading 0.9s infinite alternate; -moz-animation: loading 0.9s infinite alternate; } .loading span:nth-of-type(2) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; } .loading span:nth-of-type(3) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; } @-webkit-keyframes loading { 0% { width: 10px; height: 10px; opacity: 0.9; -webkit-transform: translateY(0); } 100% { width: 24px; height: 24px; opacity: 0.1; -webkit-transform: translateY(-21px); } } @-moz-keyframes loading { 0% { width: 10px; height: 10px; opacity: 0.9; -moz-transform: translateY(0); } 100% { width: 24px; height: 24px; opacity: 0.1; -moz-transform: translateY(-21px); } } </style>
حال وقت توضیح دادن خط به خط کد میباشد :
در ابتدا یک کلاس loading ایجاد نموده ایم ، که display آن را برابر با inline قرار داده ایم ، یعنی به صورت افقی به نمایش در بیاید.سپس با استفاده از دستور moz-animation سرعت انیمشن را تنظیم نموده ایم .
در بخش animation نام loading را فراخوانی نموده ایم ، این نام همان نامی است که با استفاده از دستور keyframes به بخش انیمشین خود اختصاص داده ایم.
خاصیت infinite alternate باعث میشود ، تصویر ما پی در پی اجرا شود.
nth-of-type : همانطور که شما خروجی کد فوق را مشاهده نمودید ، ما دارای سه توپ انیمیشنی هستیم ، با استفاده از دستور nth-of-type هر تو را با استفاده از شماره یعنی 1 و 2 و 3 مشخص میکنیم و به آنها دستورات خود را اضافه مینمائیم .
.loading span { display: inline-block; vertical-align: middle; width: 10px; height: 10px; margin: 50px auto; background: black; border-radius: 50px; -webkit-animation: loading 0.9s infinite alternate; -moz-animation: loading 0.9s infinite alternate; } .loading span:nth-of-type(2) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; } .loading span:nth-of-type(3) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; }
بخش اصلی انیمیشن ما :
برای ایجاد تحرک یا انیمشین در css3 از دستور keyframes استفاده میشود :
@-webkit-keyframes loading { 0% { width: 10px; height: 10px; opacity: 0.9; -webkit-transform: translateY(0); } 100% { width: 24px; height: 24px; opacity: 0.1; -webkit-transform: translateY(-21px); } } @-moz-keyframes loading { 0% { width: 10px; height: 10px; opacity: 0.9; -moz-transform: translateY(0); } 100% { width: 24px; height: 24px; opacity: 0.1; -moz-transform: translateY(-21px); } }
همانطور که کد فوق را مشاهده نمودید ، ما با استفاده از دستور keyframes نام کلاس خود را فراخوانی نموده ایم . قسمتهای 0 درصد نقطه شروع انیمیشن ما هستند و قسمتهای 100 درصد نقطه پایان انیمیشن میباشند .( در این دو قسمت شما میتوانید کدهای مورد نظر خود را تایپ نمائید).
دستور translateY باعث میشود توپها در مکانهای مختلفی جا به جا شوند.
سپس با استفاده از دستور فوق میتوانید style خود را فراخوانی نمائید :
<div class="loading"> <span></span> <span></span> <span></span> </div>
سوالی داشتید حتما در قسمت نظرات بپرسید!!!
سلام
ميشه آموزش بخش pseudo classe در CSS رو هم بذاريد؟
ممنون از زحماتتون
بله حتما ، ان شاالله یک جلسه را به این محبث یعنی شبه کلاس ها در css خواهیم داد ، اما اگر بخواهم برای شما دوست عزیز در همین جا یک توضیح کوتاه بدهم ، Pseudo-classes انواع حالت ها رو مشخص میکنند ، مثلا فرض کنید که شما میخواهید یک متنی را ایجاد نمائید که وقتی اشاره گر ماوس رو آن قرار گرفت به رنگ قرمز تبدیل شود ، برای اینکار از حالت hover استفاده می کنید و یا…. موضوعات دیگر ، در css حدودا 10 ، شبه کلاس وجود داره
یه سر به سایت زیر بزنید خیلی راحت میتونید لودینگ بسازید با css و کدشو بگیرین و استفاده کنید
http://cssload.net/
😀 😀 😉 😉 💡
salam
ببینم من از کجا میتونم نرم افزارcss3 lodingرو دانلود کنم؟
لطفا سریع
برخی سایت ها کنار صفحه خودشان کنار اسکرول بار یک سی اس اس دارن که به صفحه ایی خاص اشاره می کند
می خواستم خواهش کنم یک کدی برای من محبت کنید که مانند css هایی که کنار صفحه می آد و به صفحه ی دیگه اشاره می کنه
css عمودی وسط صفحه
ممنون
ببخشید ولی من نفهمیدم چی شد؟؟؟
منظور آقا/خانم ریحانی اینه که لینکهای هایی که جاشون رو صفحه پابته و با حرکت اسکرول،حرکت نمیکنن و یه جا ثابتن.
خیلی ممنون، نهایت لطفتونه که جواب میدین، هرچند کمکی به من نشد ولی سایتتون عالیه و براتون آرزوی موفقیت روزافزون میکنم.
سلام دوست عزیز .
میتونی به این صفحه مراجعه کنی
http://www.poroje.bia2internet.com/proje.aspx?id=51
خواهیش میکنم ، ممنون از معرفی کتاب ها
خیلی ممنون که وقت گذاشتید و جوابمو دادید 😳
آخه من مبتدی هستم و خیلی عجله ای واسه پایان نامم دارم یه سایت فروشگاه الکترونیکی طراحی میکنم البته یه کلاس مقدماتی فشرده رفتم که فقط در حد آشنایی و ناقص بود، شرمنده آخه این زبانها و کدها و … رو با هم قاطی کردم رفت 😥
من دقیقا کد کامل نظردهی توی سایت رو میخام(مثل همین کاری که الان دارم انجام میدم اینجا) کامنت گذاشتن، البته کجا بذارم و اتصالات و ایناشم نمیدونم 🙁
همچنین کدنویسی ارسال به ایمیل و اینکه کجای کدها بذارم و چطوری اتصال بدمش به سرور و کلاً ارسال ایمیل
باید پایان ناممو به زبون ASP.NET و ویژوال بیسیک بنویسم، تا آخر مرداد هم باید تحویلش بدم 😐
اتفاقاتی افتاد که من تا الان نتونستم طراحی سایتمو جدی دنبال کنم واسه همین مزاحم وقت شریف شماها شدم، ببخشید اگه با سوالام خستتون میکنم ولی بدونین که اجرتون پیش خدا محفوظه آخه زکات علم یاد دادن اون به دیگرانه.
سلام
خواهش میکنم . ما تا جایی که وقتمون اجازه بده پاسخ دوستان رو میدیم . ولی متاسفانه باید بگم که ما در زمینه ASP وASP.NET تخصصی نداریم و از این لحاظ کمکی نمیتونیم بکنیم . سرچ کنید . ان شاءالله که منابع بهتری در این زمینه پیدا خواهید کرد .
سلام آقا لقمان چرا مطلب من هنوز تایید نشده؟؟؟ 😕
اگه مطالب رو نمیخواید بگید…..
سلام
ببخشید . تازه دیدم احسان جان . منتشر شد .
راستی یه سر برو پروفایلت و قسمت زندگی نامه رو پر کن . چون زیر پستات نمایش داده میشه . تخصص ها و علاقمندی هاتو در حد دو الی چهار جمله بنویس .
منتظر مطالب بعدیت هستیم .
موفق باشی .
سلام خسته نباشید
یه سوال: یعنی این کدها الان به زبان سی شارپه؟ کاش بیشتر تو زمینه ی ASP.net و VB کار میکردین، من خیلی بهش نیاز دارم
لطفا فرم نظردهی به سایت و طریقه اتصال به ایمیل از طریق سایت رو به زبان ASP.net و VB رو برام بنویسید، ممنون میشم و دعاگوتون.
سلام
دوست عزيز،ميشه بفرماييد دقيقا چه كدي رو ميخوايد؟منظورم كد ويژوال هست كه تو نظرتون گفتيد
ممنون
دوست عزیز این ها کد های css و css3 هستند . سی شارپ؟؟؟!!!
در ضمن با عرض پوزش فعلا برنامه ای برای asp.net نداریم
سلام.
خیلی خوب بود فقط میشه کد قرار دادن لودینگ در صفحه رو بزارید تا از این آموزش استفاده کنیم؟
ممنون.
به روی چشم!!!