كن مهووس: اضافة تأثير تحميل خرافي V1

أفضل المواضيع
  • قالب كن مهووس v3
  • أحدث وأضخم باتشات PES 2010 لعام 2016 باخر الانتقالات والاضافات الرهيبة
  • قالبي تدوين وماتلاين المدفوعين على بيكاليكا {تحديث}
  • قالب مدونة نكهة الاصلى مجانا بدون مشاكل
  • Stronghold Crusader 2 The Templar and The Duke-CODEX
  • هذه هي كافة أجهزة سوني التي ستدعم تحديث الأندرويد "مارشميلو 6.0" الجديد
  • تشغيل نت مجانى على خط فودافون
  • اضافة واجهة احترافية v2
  • اضافة صفحة الخطا v2
  • قالب كن مهووس v2 مجانا
نشر في
اضافة تأثير تحميل خرافي V1
كتب بواسطة
عدد التعليقات
0 التعليقات
السلام عليكم ورحمة الله وبركاتة لعل كثير من المدونات علي منصة بلوجر الشهيرة تضيف تأثير لتحميل المدونة في هذة التدوينة سنعرض عليكم تأثير تحميل جديد بعض الشى بنسخته الاولى

صورة من التأثير



كما نري خلفية بالالوان جذور فلات خرافية

هل اعبجك التأثير؟!

الان مع اضافتة لمدونتك

ادخل الي القالب ثم Html

الان اضغط ctrl+f واكتب body>

وضع اسفلة هذا الكود



<script type='text/javascript'>
//<![CDATA[
jQuery(window).load(function() {
        // will first fade out the loading animation
$(".loading-overlay").delay(1000).fadeOut('slow');
})
//]]>
</script>

وضع اسفل هذا الكود كود اخر وهو هذا


&lt;div class='loading-overlay text-center'&gt;
&lt;div class='loader'&gt;
&lt;div class='inner one'&gt;&lt;/div&gt;
&lt;div class='inner two'&gt;&lt;/div&gt;
&lt;div class=&quot;inner-two&quot;&gt;&lt;/div&gt;
&lt;img alt='' src='' style=&quot;margin-top: 20px;&quot;/&gt;
&lt;div class='inner three'&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

والان ابحث عن </b:skin>
وضع فوقها هذا الكود



.loading-overlay {position: fixed;width: 100%;height: 100%;left: 0;top: 0;z-index: 99999;background: rgb(38, 52, 75);}
.loader {position: absolute;top: calc(50% - 32px);left: calc(50% - 32px);width: 64px;height: 64px;border-radius: 50%;perspective: 800px;}
.inner {position: absolute;box-sizing: border-box;width: 100%;height: 100%;border-radius: 50%;  }
.inner.one {left: 0%;top: 0%;animation: rotate-one 1s linear infinite;border-bottom: 3px solid #EFEFFA;}
.inner.two {right: 0%;top: 0%;animation: rotate-two 1s linear infinite;border-right: 3px solid #EFEFFA;}
.inner.three {right: 0%;bottom: 0%;animation: rotate-three 1s linear infinite;border-top: 3px solid #EFEFFA;}
@keyframes rotate-one {
0% {transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}
100% {transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}}
@keyframes rotate-two {
0% {transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);}
100% {transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}}
@keyframes rotate-three {
0% {transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);}
100% {transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}}


دمتم في امان الله :* 
رابط المعاينة في السايدبار

ملحوظة صغيره قبل اغلاق الموضوع يمكن اضافة صوره في الاضافة 
ابحث عن هذا الكلاس 
class="inner-two"
ستجد اسفلة كود صورة اضف رابط الصورة وستعبجك بالصورة انشاء الله :)

معاينة التأثير

معاينة

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1-أن يكون التعليق خاص بمحتوى التدوينة
2-أن لا تضع أي روابط خارجية
3-لاضافة كود حوله اولا بمحول الاكواد
4-أي سؤال خارج محتوى التدوينة يرجى التواصل معنا عبر صفحتنا


محول الاكواد الابتسامات





اخبار الهواتف الذكيه
    فريق العمل

    Milad Shenouda

    Front-End Developer

    السيد ابراهيم

    مدير الموقع ومصمم فوتوشوب

    انضم الينا

    مدون محترف

    انضم الينا

    مدون محترف

    اعجب بصفحتنا على الفيسبوك
    ماذا تنتظر !!!
    أنضم الى اعضاء مدونة
    كن مهووس | هوسنا هو سر ابداعنا
    تابعنا الان على تويتر
    فنحن الافضل

    جميع الحقوق محفوظة

    كن مهووس

    2018

    تكويد وتطوير