× İletişim Formu Sayfa Ön Yükleme Eklentisi - 8 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 8 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{overflow:hidden;background:#000;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader-container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%} #loader-do{background:#fff;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:loader-do .6s ease-in-out infinite} @-webkit-keyframes loader-do{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}} .loader-step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0} @-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}} #step-1{animation:anim 1.8s linear infinite} #step-2{animation:anim 1.8s linear infinite -.6s} #step-3{animation:anim 1.8s linear infinite -1.2s} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div id='loader-container' class='spinner-inner'> <div id='loader-do'></div> <div class='loader-step' id='step-1'></div> <div class='loader-step' id='step-2'></div> <div class='loader-step' id='step-3'></div> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Sayfa Ön Yükleme Eklentisi - 8" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Sayfa Ön Yükleme Eklentisi - 8 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 8 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{overflow:hidden;background:#000;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader-container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%} #loader-do{background:#fff;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:loader-do .6s ease-in-out infinite} @-webkit-keyframes loader-do{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}} .loader-step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0} @-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}} #step-1{animation:anim 1.8s linear infinite} #step-2{animation:anim 1.8s linear infinite -.6s} #step-3{animation:anim 1.8s linear infinite -1.2s} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div id='loader-container' class='spinner-inner'> <div id='loader-do'></div> <div class='loader-step' id='step-1'></div> <div class='loader-step' id='step-2'></div> <div class='loader-step' id='step-3'></div> </div> </div> </body> </html>
Yorum Gönder