چاپ کردن این صفحه

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

By خرداد 17, 1394 6325 0

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

حتما برای شما هم پیش آمده که بخواهید یک صفحه از وب سایت را باز کنید ولی بدلیل مشکلات گوناگون صفحه مورد نظر باز نشده و یک لودر به شما نمایش داده می شود که ساده ترین آن نیز همان لودر تب مرورگر می باشد . دایره ای که دائم در حال چرخش است .
من در ادامه می خواهم با استفاده از 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

آخرین‌ها از سعید صبح خیز

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