اضافة تأثير التحميل على شكل قمر يدور بمناسبة رمضان
بمناسبة شهر رمضان الكريم نتمى لكم ان تكونوا فى أحسن صحة وحال وكما تعلمون نحن في اليوم 10 من شهر رمضان الكريم لذى احببت ان اقدم لكم اضافة جميلة وحصرية وهي إضافة تاثير التحميل على شكل قمر يدور ليعطى لمدونتك لمسة رمضانية واحترافية.
- اذهب إلى لوحة التحكم ثم تحرير Html.
- أبحث عن الوسم <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>
- قم بحفظ العمل.
- ومبروك عليك الإضافة
- وهذا كل شئ فى موضوع اليوم اذا واجهتك أي مشكلة فى تركيب الإضافة او تريد التعديل على أي شيء ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع.
المصدر: دبور فون
طول ما فى اللى ذيك فى الويب العربى عمره ما هيتقدم لأنك مجرد سارق ولم تذكر حتى المصدر وإذا كنت تستطيع عرض تنعليقك اعرضه فأنا أعرف انك سوف تقوم بمسحه
ردحذفلا يا أخي أنا لن أحذف التعليق وشكرا لك على النصيحة وأنا لم أسرق الموضوع سرقت فقط الكود
حذف