امروزه با آمدن ورژن 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 داره...
ولی وقتی میزاریش توی فایل باید حذف بشه...
با تشکر
البته کپی رایت رو رعایت کردم
جالب بود
کوچیکه برای من ...
وردپرس هم کوچیکه ...
بهتر از اوناشو میزنم ...
=======================
داداش معلومه خیلی جو گیری
بدت نیادا ولی اسکریپت نوشتن بهتر از وردپرس به اون اسونیا هم که فکرش رو می کنی
نیستا
حالا شاید فکر کنی اسکریپت نوشتن هم مثل همین کد نویسی و html و css راحته که یه ماهه یاد گرفتی
ولی دادا قبول کن که اینکاره نیستی
-------------------------------------------------------------
اینو گفتم که بدونی باهات دشمنی ندارم ولی خوب هیچی بعدا که شروع کردی می فهمی
اونایی که وردپرس رو نوشتن میدنی چند نفر بودن ؟!!
میدونی وردپرس چه امنیت بالایی داره ؟!!!
میدونی ریلکت کردن اسکریپت اونم وردپرس چه دردسری داره
======================================
ما که بخیل نیستیم خوشحال هم میشیم که اسکریپت به نام ایرانی هم داشته باشیم
-------------------------------------------------
خلاصه داداش خوش باشی اصلا به من چه
منو چه به این حرفا ، اصلا این فوضولی ها به من نیومده
والله
اچ تی ام ال و سی ساس اس رو هم دو ماهه یاد نگرفتم که شدم این ...
نمیدونم چرا هر کس دو روز توی اینترنت میمونه فکر می کنه همه چیزو در باره همه کس میدونه و کلا پروفسور شده ...
با تشکر
خلاقیتت خوبه .
ممنون پست خوبی بود بعد چند وقت آپدیت کردی .
انشا الله بعدا میذارمش ...
با تشکر
یه پیشنهاد هم بهت میدم
اگه کاری کنی کهموقع چرخش با جاوا opacity هم 0 و 10 و 0 و 100 و الی اخر...
بشه خیلی جالب میشه