Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

کد لودینگ سی اس اس

امروزه با آمدن ورژن 3 از زبان متفاوت css باعث شده است که کدنویس ها به جای استفاده از گرافیک و حجم بالای تصاویر در صفحه از کدها استفاده کنند. از این رو استفاده از لودینگ های سی اس اس نیز در چنین شرایطی علاوه بر سرعت لود بالاتر نسبت به عکس زیبایی و قابلیت انعطاف بسیار زیادی را دارد.

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

این کد سی اس اس کاملا توسط moisrex ساخته شده و کپی برداری از آن باعث نارضایتی طراح است.

<div class="mirLoading"></div>
<style>
  @keyframes moisrex{
    from{transform:rotate(0deg);}
    to{transform:rotate(180deg);}
  }
  @-moz-keyframes moisrex{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(180deg);}
  }
  @-o-keyframes moisrex{
    from{-o-transform:rotate(0deg);}
    to{-o-transform:rotate(180deg);}
  }
  @-webkit-keyframes moisrex{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(180deg);}
  }
  @-ms-keyframes moisrex{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(180deg);}
  }
  .mirLoading{
    border-radius:100px;
    -moz-border-radius:100px;
    -o-border-radius:100px;
    -ms-border-radius:100px;
    -webkit-border-radius:100px;
    width:50px;
    height:50px;
    border:3px transparent solid;
    border-top:none;
    border-bottom:none;
    border-right-color:#036;
    border-left-color:#036;
    margin:0 auto;
    animation:moisrex .5s infinite linear;
    -moz-animation:moisrex .5s infinite linear;
    -o-animation:moisrex .5s infinite linear;
    -webkit-animation:moisrex .5s infinite linear;
    -ms-animation:moisrex .5s infinite linear;
  }
</style>
<style>
  @keyframes moisrex{
    from{transform:rotate(0deg);}
    to{transform:rotate(180deg);}
  }
  @-moz-keyframes moisrex{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(180deg);}
  }
  @-o-keyframes moisrex{
    from{-o-transform:rotate(0deg);}
    to{-o-transform:rotate(180deg);}
  }
  @-webkit-keyframes moisrex{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(180deg);}
  }
  @-ms-keyframes moisrex{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(180deg);}
  }
  .mirLoading{
    border-radius:100px;
    -moz-border-radius:100px;
    -o-border-radius:100px;
    -ms-border-radius:100px;
    -webkit-border-radius:100px;
    width:50px;
    height:50px;
    border:3px transparent solid;
    border-right-color:#036;
    border-left-color:#036;
    margin:0 auto;
    animation:moisrex .5s infinite linear;
    -moz-animation:moisrex .5s infinite linear;
    -o-animation:moisrex .5s infinite linear;
    -webkit-animation:moisrex .5s infinite linear;
    -ms-animation:moisrex .5s infinite linear;
  }
</style>
سلام واقعا وبلاگ خوبی دارین واقعا کدنویسی سخته موفق باشید
خعلی زرنگی... میای فش میدی مام بیایم وبلاگت فش بدیم ولی بجاش جذب بشیم!!! در جوابت میگم بیاه!!!!!خخخخ

اون فحشام نثار خودت .

شکلک
پاسخ : سلام.
دلیلی بر این کار ندارم .
با کمی تامل متوجه میشوید که کدستان 30000 عضو دارد و نیازی ندارد که به شما توهین کند.
محتوای هر وبلاگ به خود شخص مربوط میشود
این اتهامات هم در پست:
http://moisrex.rozblog.com/post/3580
از کدستان رفع میشوند
با این حال از شما میخوایم که مشخصات فرد را به ما دهید تا از تکرار این واقعه ی اسف ناک جولوگیری کنیم.
همچنین ما با وسواسی مستدام در حال پیگیری این ماجرا هستیم
با تشکر
من چجوری می تونم کد رو تو سایتم بزارم فایل style توی style.css خودم گزاشتم اما هیچ اودینگ در سایتم مشاده نکردم ؟؟
پاسخ : اسماعیل : احتمالاً کلشو با هم گذاشتی...
عزیز دل...مرغ تو بیرون پر داره...
ولی وقتی میخوای بپزیش و بزاری توی قابلمه که با پر نمیزاری...:دی
اینم وقتی بیرون از فایل استایله یه تگ style داره...
ولی وقتی میزاریش توی فایل باید حذف بشه...
با تشکر
من این مد رو انداختم تو وب خوم شکلک
البته کپی رایت رو رعایت کردم شکلک
ممنون
جالب بود
سیستم وبلاگدهی؟
کوچیکه برای من ...
وردپرس هم کوچیکه ...
بهتر از اوناشو میزنم ...

=======================
داداش معلومه خیلی جو گیری شکلک

بدت نیادا ولی اسکریپت نوشتن بهتر از وردپرس به اون اسونیا هم که فکرش رو می کنی

نیستا

حالا شاید فکر کنی اسکریپت نوشتن هم مثل همین کد نویسی و html و css راحته که یه ماهه یاد گرفتی

ولی دادا قبول کن که اینکاره نیستی

-------------------------------------------------------------

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

اونایی که وردپرس رو نوشتن میدنی چند نفر بودن ؟!!

میدونی وردپرس چه امنیت بالایی داره ؟!!!

میدونی ریلکت کردن اسکریپت اونم وردپرس چه دردسری داره
======================================

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

-------------------------------------------------

خلاصه داداش خوش باشی اصلا به من چه
شکلک
منو چه به این حرفا ، اصلا این فوضولی ها به من نیومده

والله شکلک
پاسخ : حالا بعدا متوجه میشید ...
اچ تی ام ال و سی ساس اس رو هم دو ماهه یاد نگرفتم که شدم این ...
نمیدونم چرا هر کس دو روز توی اینترنت میمونه فکر می کنه همه چیزو در باره همه کس میدونه و کلا پروفسور شده ...
با تشکر
خیلی آسونه کدش خیلی راحته .
خلاقیتت خوبه .
ممنون پست خوبی بود بعد چند وقت آپدیت کردی .شکلک
خیلی جالبه
من خودم أزينا درست كرده بودم ولي با مال تو فرق داشت بديش فقط اينه كه تو بعضي از مرورگر ها كار نميكنه
پاسخ : یکی هم با استفاده از canvas ساختم که اون هم بازم توی مرورگر هایی که html5 رو پشتیبانی نمی کنن عمل نمی کنه ...
انشا الله بعدا میذارمش ...
با تشکر
خیلی جالب نوشتی
یه پیشنهاد هم بهت میدم
اگه کاری کنی کهموقع چرخش با جاوا opacity هم 0 و 10 و 0 و 100 و الی اخر...
بشه خیلی جالب میشهشکلکشکلکشکلکشکلک

کد امنیتی رفرش
1 2 صفحه بعد
کلاس های آنلاین فعال

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

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4504
تعداد اعضا : 37335
افراد آنلاین : 11
بازدید امروز : 932
بازدید دیروز : 1,657
گوگل امروز : 20
گوگل دیروز : 75
بازدید هفته : 932
بازدید ماه : 18,199
بازدید سال : 180,429
بازدید کلی : 14,180,766