CINXE.COM
3D Tur
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>3D Tur</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="model-viewer.js?v5"></script> <style> body{ padding: 0; margin: 0; overflow: hidden; } .loader-cover{ width: 100%; height: 100%; position: absolute; font-family: sans-serif; left: 0; top: 0; z-index: 9999; background: rgb(43, 43, 43); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(43, 43, 43, 1) 7%, rgba(14, 14, 14, 1) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(7%, rgba(43, 43, 43, 1)), color-stop(100%, rgba(14, 14, 14, 1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(43, 43, 43, 1) 7%, rgba(14, 14, 14, 1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(43, 43, 43, 1) 7%, rgba(14, 14, 14, 1) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(43, 43, 43, 1) 7%, rgba(14, 14, 14, 1) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(43, 43, 43, 1) 7%, rgba(14, 14, 14, 1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b2b2b', endColorstr='#0e0e0e', GradientType=1); /* IE6-9 fallback on horizontal gradient */ } .loader-cover .loaderBar{ background-color: #d22831; height: 5px; width: 0; position: fixed; top: 0; left: 0; } .loader-cover .logoContainer{ position: absolute; width: 100%; top: 15%; color: white; font-size: 11px; text-align: center; } .loader-cover .logoContainer .siteName{ font-size: 25px; width: 100%; padding-bottom: 40px; } /* WebKit and Opera browsers */ @-webkit-keyframes spinner { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-360deg); } } /* all other browsers */ @keyframes spinner { from { -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } to { -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); transform: rotateY(-360deg); } } .loader-cover .logo-anim { -webkit-animation-name: spinner; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 4s; animation-name: spinner; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 4s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; margin-bottom: 30px; } </style> </head> <body bgcolor="black"> <div class="loader-cover"> <div class="loaderBar"></div> <div class="logoContainer"> <div class="siteName">3DTur Y眉kleniyor...</div> <img src="logo.png" alt="#" width="100" height="103" class="logo-anim" /><br> <img src="logo-text.png" alt="#" /><br> </div> </div> <script type="text/javascript"> $(document).ready(function () { var model = ''; createModel(model, 1, 1, 1); }); </script> </body> </html>