• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6258 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

ایجاد Loading با CSS3

13417 ۱۱ مرداد ۹۱

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 20 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      میلاد حیدری(۱۲ مرداد ۱۳۹۱)

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

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

    • ‏‏

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

  • ‏‏

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

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

    • ‏‏
      لقمان آوند(۱۲ مرداد ۱۳۹۱)

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

      • ‏‏
        احسان امیدی(۱۲ مرداد ۱۳۹۱)

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

        • ‏‏
          لقمان آوند(۱۳ مرداد ۱۳۹۱)

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

  • ‏‏

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

    • ‏‏

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

  • ‏‏
    ریحانی(۱۳ مرداد ۱۳۹۱)

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

    • ‏‏
      میلاد حیدری(۱۳ مرداد ۱۳۹۱)

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

      • ‏‏

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

  • ‏‏
    ریحانی(۱۳ مرداد ۱۳۹۱)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      میلاد حیدری(۲۸ مرداد ۱۳۹۱)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram