× İletişim Formu Sayfa Ön Yükleme Eklentisi - 11 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 11 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .loader{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px} .loader > .steps{position:absolute;top:50%;left:50%;z-index:10;width:160px;height:100px;margin-top:-50px;margin-left:-80px;border-radius:5px;background-color:#1e3f57;transform-type:preserve-3d;animation:steps1 3s cubic-bezier(.55,.3,.24,.99) infinite} .loader > .steps:nth-child(2){z-index:11;width:150px;height:90px;margin-top:-45px;margin-left:-75px;border-radius:3px;background-color:#3c617d;animation-name:steps2} .loader > .steps:nth-child(3){z-index:12;width:40px;height:20px;margin-top:50px;margin-left:-20px;border-radius:0 0 5px 5px;background-color:#6bb2cd;animation-name:steps3} @keyframes steps1{3%,97%{width:160px;height:100px;margin-top:-50px;margin-left:-80px}30%,36%{width:80px;height:120px;margin-top:-60px;margin-left:-40px}63%,69%{width:40px;height:80px;margin-top:-40px;margin-left:-20px}} @keyframes steps2{3%,97%{width:150px;height:90px;margin-top:-45px;margin-left:-75px}30%,36%{width:70px;height:96px;margin-top:-48px;margin-left:-35px}63%,69%{width:32px;height:60px;margin-top:-30px;margin-left:-16px}} @keyframes steps3{3%,97%{width:40px;height:20px;margin-top:50px;margin-left:-20px}30%,36%{width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px}63%,69%{width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='loader spinner'> <div class='steps'></div> <div class='steps'></div> <div class='steps'></div> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Sayfa Ön Yükleme Eklentisi - 11" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Sayfa Ön Yükleme Eklentisi - 11 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 11 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .loader{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px} .loader > .steps{position:absolute;top:50%;left:50%;z-index:10;width:160px;height:100px;margin-top:-50px;margin-left:-80px;border-radius:5px;background-color:#1e3f57;transform-type:preserve-3d;animation:steps1 3s cubic-bezier(.55,.3,.24,.99) infinite} .loader > .steps:nth-child(2){z-index:11;width:150px;height:90px;margin-top:-45px;margin-left:-75px;border-radius:3px;background-color:#3c617d;animation-name:steps2} .loader > .steps:nth-child(3){z-index:12;width:40px;height:20px;margin-top:50px;margin-left:-20px;border-radius:0 0 5px 5px;background-color:#6bb2cd;animation-name:steps3} @keyframes steps1{3%,97%{width:160px;height:100px;margin-top:-50px;margin-left:-80px}30%,36%{width:80px;height:120px;margin-top:-60px;margin-left:-40px}63%,69%{width:40px;height:80px;margin-top:-40px;margin-left:-20px}} @keyframes steps2{3%,97%{width:150px;height:90px;margin-top:-45px;margin-left:-75px}30%,36%{width:70px;height:96px;margin-top:-48px;margin-left:-35px}63%,69%{width:32px;height:60px;margin-top:-30px;margin-left:-16px}} @keyframes steps3{3%,97%{width:40px;height:20px;margin-top:50px;margin-left:-20px}30%,36%{width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px}63%,69%{width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='loader spinner'> <div class='steps'></div> <div class='steps'></div> <div class='steps'></div> </div> </div> </body> </html>
Yorum Gönder