× İletişim Formu Sayfa Ön Yükleme Eklentisi - 5 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 5 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000} .loader-spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:loader-spinner-wiggle 1.2s infinite} @keyframes loader-spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}} .loader-spinner:before,.loader-spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:loader-spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,loader-spinner-fade 1.2s linear infinite} .loader-spinner:before{border-top-color:#66e5ff} .loader-spinner:after{border-top-color:#f0db75;animation-delay:0.3s} @keyframes loader-spinner-spin{100%{transform:rotate(360deg)}} @keyframes loader-spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class="loader-spinner"></div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Sayfa Ön Yükleme Eklentisi - 5" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Sayfa Ön Yükleme Eklentisi - 5 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 5 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000} .loader-spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:loader-spinner-wiggle 1.2s infinite} @keyframes loader-spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}} .loader-spinner:before,.loader-spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:loader-spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,loader-spinner-fade 1.2s linear infinite} .loader-spinner:before{border-top-color:#66e5ff} .loader-spinner:after{border-top-color:#f0db75;animation-delay:0.3s} @keyframes loader-spinner-spin{100%{transform:rotate(360deg)}} @keyframes loader-spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class="loader-spinner"></div> </div> </body> </html>
Yorum Gönder