× İletişim Formu Sayfa Ön Yükleme Eklentisi - 12 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 12 (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} .spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)} [class^="balls-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0} @keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}} .balls-1{z-index:-1;background-color:#2196F4;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)} .balls-2{z-index:-2;background-color:#03A9F5;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)} .balls-3{z-index:-3;background-color:#00BCD5;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)} .balls-4{z-index:-4;background-color:#009689;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)} .balls-5{z-index:-5;background-color:#4CAF51;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)} .balls-6{z-index:-6;background-color:#8BC35A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)} .balls-7{z-index:-7;background-color:#CDDC38;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)} .balls-8{z-index:-8;background-color:#FFEB4B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='spinner'> <span class='balls-1'></span> <span class='balls-2'></span> <span class='balls-3'></span> <span class='balls-4'></span> <span class='balls-5'></span> <span class='balls-6'></span> <span class='balls-7'></span> <span class='balls-8'></span> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Sayfa Ön Yükleme Eklentisi - 12" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Sayfa Ön Yükleme Eklentisi - 12 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 12 (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} .spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)} [class^="balls-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0} @keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}} .balls-1{z-index:-1;background-color:#2196F4;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)} .balls-2{z-index:-2;background-color:#03A9F5;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)} .balls-3{z-index:-3;background-color:#00BCD5;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)} .balls-4{z-index:-4;background-color:#009689;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)} .balls-5{z-index:-5;background-color:#4CAF51;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)} .balls-6{z-index:-6;background-color:#8BC35A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)} .balls-7{z-index:-7;background-color:#CDDC38;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)} .balls-8{z-index:-8;background-color:#FFEB4B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='spinner'> <span class='balls-1'></span> <span class='balls-2'></span> <span class='balls-3'></span> <span class='balls-4'></span> <span class='balls-5'></span> <span class='balls-6'></span> <span class='balls-7'></span> <span class='balls-8'></span> </div> </div> </body> </html>
Yorum Gönder