× İletişim Formu Sayfa Ön Yükleme Eklentisi - 4 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 4 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1000} .loader-juggle{width:300px;height:300px;position:absolute;top:50%;margin-top:-150px;left:50%;margin-left:-150px} .loader-juggle div{position:absolute;width:21px;height:21px;border-radius:10.5px;background:#4285f4;margin-top:150px;margin-left:150px;animation:juggle 2.1s linear infinite} .loader-juggle div:nth-child(1){background:#34a853;animation-delay:-0.7s} .loader-juggle div:nth-child(2){background:#fbbc05;animation-delay:-1.4s} @keyframes juggle{0%{transform:translateX(0px) translateY(0px)}12.5%{transform:translateX(25px) translateY(-55px) scale(1.1);background:#ea4335}25%{transform:translateX(50px) translateY(0px);animation-timing-function:ease-out}37.5%{transform:translateX(25px) translateY(55px)}50%{transform:translateX(0px) translateY(0px)}62.5%{transform:translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function:ease-in}75%{transform:translateX(-50px) translateY(0px);animation-timing-function:ease-out}87.5%{transform:translateX(-25px) translateY(55px)}100%{transform:translateX(0px) translateY(0px)}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='loader-juggle'> <div class='loader-ball'></div> <div class='loader-ball'></div> <div class='loader-ball'></div> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Sayfa Ön Yükleme Eklentisi - 4" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Sayfa Ön Yükleme Eklentisi - 4 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 4 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1000} .loader-juggle{width:300px;height:300px;position:absolute;top:50%;margin-top:-150px;left:50%;margin-left:-150px} .loader-juggle div{position:absolute;width:21px;height:21px;border-radius:10.5px;background:#4285f4;margin-top:150px;margin-left:150px;animation:juggle 2.1s linear infinite} .loader-juggle div:nth-child(1){background:#34a853;animation-delay:-0.7s} .loader-juggle div:nth-child(2){background:#fbbc05;animation-delay:-1.4s} @keyframes juggle{0%{transform:translateX(0px) translateY(0px)}12.5%{transform:translateX(25px) translateY(-55px) scale(1.1);background:#ea4335}25%{transform:translateX(50px) translateY(0px);animation-timing-function:ease-out}37.5%{transform:translateX(25px) translateY(55px)}50%{transform:translateX(0px) translateY(0px)}62.5%{transform:translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function:ease-in}75%{transform:translateX(-50px) translateY(0px);animation-timing-function:ease-out}87.5%{transform:translateX(-25px) translateY(55px)}100%{transform:translateX(0px) translateY(0px)}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='loader-juggle'> <div class='loader-ball'></div> <div class='loader-ball'></div> <div class='loader-ball'></div> </div> </div> </body> </html>
Yorum Gönder