اضافة تاثير التحميل على شكل هلال بمناسبة رمضان





السلام عليكم ورحمة الله وبركاته 
بمناسبة شهر رمضان الكريم نتمى لكم ان تكون فى احسن صحة وحال ونقدم لكم وها نحن فى 6 ايام الشهر الكريم احببت ان اقدم لكم اضافة تاثير التحميل على شكل قمر ليعطى لمدونتك لمسة احترافية  


خطوات التركيب 

  1. أبحث عن الوسم  <body>
وضع فوقه الكود التالى : 


<style>

#loader .planet_wraper {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: 7rem;

height: 7rem;

margin: auto;

border-radius: 50%;

}

#loader .planet_shadow {

background: -webkit-linear-gradient(top left, #24b88b 20%, #21776f);

background: -moz-linear-gradient(top left, #24b88b 20%, #21776f);

box-shadow: inset 0 -5px 10px rgba(22, 48, 64, 0.5), 0 0 1.5rem rgba(170, 194, 194, 0.3);

}

#loader .planet {

position: relative;

width: 100%;

height: 100%;

border-radius: 50%;

animation: rotate 15s linear infinite;

overflow: hidden;

}

#loader .planet_wraper::before, .planet_wraper::after {

content: '';

display: block;

position: absolute;

border-radius: 50%;

box-shadow: 0 0.1rem 0.1rem rgba(170, 194, 194, 0.1), inset 0 -0.1rem 0.1rem rgba(170, 194, 194, 0.1);

animation: rotate 5s linear infinite;

}

#loader .planet_wraper::before {

top: -1.75rem;

left: -1.75rem;

width: 11rem;

height: 11rem;

animation-delay: 1s;

}

#loader .planet_wraper::after {

top: -2.5rem;

left: -2.5rem;

width: 15rem;

height: 15rem;

}

#loader .planet > * {

position: relative;

border-radius: 50%;

background-color: #209b85;

box-shadow: inset 1px 1px 5px #163040, 0 0 7px #63eed2 ;

opacity: 0.3;

}

#loader .crater_1 {

top: 2rem;

right: 1.5rem;

width: 0.75rem;

height: 0.75rem;

}

#loader .crater_2 {

top: -0.75rem;

right: 5rem;

width: 2.5rem;

height: 2.5rem;

transform: scaleY(0.8) rotateY(-20deg);

}

#loader .crater_3 {

top: 0.5rem;

right: 2rem;

width: 1.25rem;

height: 1.25rem;

}

#loader .crater_4 {

top: -1.5rem;

right: 3.5rem;

width: 0.5rem;

height: 0.5rem;

}

#loader .crater_5 {

top: 1.25rem;

right: 3.5rem;

width: 2rem;

height: 1.5rem;

}

@keyframes bg {

to { background-position: center 20rem; }

}

@keyframes rotate {

to { transform: rotate(360deg)}

}

#loader {;width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000; opacity: .96;

background-color: #163040;

background-image: url(//googledrive.com/host/0ByT9JKjciao_Z0dLRzZlMThpemc);

background-size: 20rem 20rem;

background-position: center 0;

animation: bg 20s linear infinite;

}

</style>

<div id='loader'>

<div class='planet_wraper planet_shadow'>

<div class='planet'>

<div class='crater_1'></div>

<div class='crater_2'></div>

<div class='crater_3'></div>

<div class='crater_4'></div>

<div class='crater_5'></div>

</div>

</div>

</div>

<script type='text/javascript'>

//<![CDATA[

// Loader

$(window).bind("load",function(){$("#loader").fadeOut(1e3)});

//]]>

</script>

دبور فون

M.H.I

ليست هناك تعليقات:

إرسال تعليق

نسعد ونتشرف بتعليقاتكم
لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊

أحدث الأخبار

10/recent