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 و الی اخر...
بشه خیلی جالب میشه

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

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

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36491
افراد آنلاین : 7
بازدید امروز : 646
بازدید دیروز : 1,059
گوگل امروز : 84
گوگل دیروز : 157
بازدید هفته : 6,846
بازدید ماه : 24,366
بازدید سال : 75,432
بازدید کلی : 10,469,908