آذر 24, 1398

    آموزش ساخت لودر Preloaders صفحه وب سایت با Css3 و Html ویژه

    By خرداد 17, 1394 6235 دیدگاه (1)

    در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

    حتما برای شما هم پیش آمده که بخواهید یک صفحه از وب سایت را باز کنید ولی بدلیل مشکلات گوناگون صفحه مورد نظر باز نشده و یک لودر به شما نمایش داده می شود که ساده ترین آن نیز همان لودر تب مرورگر می باشد . دایره ای که دائم در حال چرخش است .
    من در ادامه می خواهم با استفاده از Html  و Css3 یک لودر همانند مرورگر برای شما ایجاد کنم .تصویر آموزش جهت نمونه می باشد و برای مشاهده دمو باید بر روی لینک مورد نظر کلیک کنید . ( دمو تمرین در مرورگر)

    1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ایکه بتوانید یکسری کد را درون آن تایپ کنید باز کرده و گدهای ابتدای Html را همانند تصویر زیر درون آن تایپ کنید .

    <!DOCTYPE html>
    <html>
      <head>
      </head>
            <body>
            </body>
    </html>

     

    2. سپس یک دیویژن با عنوان <div class="preloader4"></div> درون تگ body ایجاد کنید تا استایل را با استفاده از این کلاس فراخوانی کنیم .

    <div class="preloader4"></div>

     

    3. در مرحله بعدی یک تگ <style> بین تگ head ایجاد کرده و کدهای زیر را درون آن کپی کنید . من برای اینکه برای کاربران مبتدی این قسمت مبهم نباشد کل کد را تایپ می کنم .

     

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .preloader4 {
       width:200px;
       height:200px;
       display:inline-block;
       padding:0px;
       border-radius:100%;
       border:2px solid;
       border-top-color:rgba(0,0,0, 0.65);
       border-bottom-color:rgba(0,0,0, 0.15);
       border-left-color:rgba(0,0,0, 0.65);
       border-right-color:rgba(0,0,0, 0.15);
       -webkit-animation: preloader4 0.8s linear infinite;
       animation: preloader4 0.8s linear infinite;
    }
    @keyframes preloader4 {
       from {transform: rotate(0deg);}
       to {transform: rotate(360deg);}
    }
    @-webkit-keyframes preloader4 {
       from {-webkit-transform: rotate(0deg);}
       to {-webkit-transform: rotate(360deg);}
    }
    </style>
    </head>
    <body>
    <div class="preloader4"></div>
    <h2>Learning asarayan- preloader </h2>
    </body>
    </html>

    دمو تمرین در مرورگر

    رای دادن به این مورد
    (1 رای)
    آخرین بروز رسانی جمعه, 22 خرداد 1394 10:10

    نوشتن دیدگاه

    تصویر امنیتی
    تصویر امنیتی جدید

    دیدگاه‌ها   

    0 #1 hadi 1398-05-26 11:58
    برای اینکه عکس وسط لودر قرار بدیم ثابت باشه چیکار کنیم؟
    نقل قول کردن

    آخرین مطالب آموزشی

    «
    • 1
    • 2
    • 3
    »

    گالری پست

    چطور می توانید متوجه شوید که در اندروید چه برنامه ای را بیش از همه استفاده می کنید ؟

    چطور می توانید وضعیت فعالیت خود را در اینستاگرام پنهان کنید

    موس Trackball چیست و چرا شما نیاز به موس Trackball دارید ؟

    ارسال فکس از طریق تلفن همراه

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

    چطور فایل های خراب در ویندوز را درست کنیم

    تماس از طریق WiFi calling و روش فعال کردن آن در گوشیهای اندروید

    چگونه پسورد آنلاین قوی بسازیم که به سختی هک شود ؟

    قبل از فعال کردن تایید دو مرحله ای این مقاله را بخوانید

    © 2018 Your Company. All Rights Reserved. Designed By Tripples

    Please publish modules in offcanvas position.

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