| Mawdo3jded |
2020-04-12 07:26 AM |
بلوجر اضافة تأثير التحميل علي شكل قمر بمناسبة شهر رمضان الكريم
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
عفواً لايمكن عرض الروابط إلا بعد الرد على الموضوع
خطوات التركيب
أبحث عن الوسم <body>
واضف هذا الكود فوقه
كود PHP:
<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>
عفواً لايمكن عرض الروابط إلا بعد الرد على الموضوع |
