body{background:#222;padding:0;margin:0;font:20px/1 Arial,'Simsun';overflow:hidden} #wrap{width:640px;/*box-shadow:10px -10px 10px #2A271C inset;*/position:absolute;top:-1000%;left:50%;margin:-480px 0 0 -320px;background:url('../images/wrap.jpg') #234997;background-size:100% 100%;/*border-radius:20px*/} #load{width:240px;height:240px;float:left;color:#fff;text-align:center;position:absolute;top:50%;left:50%;margin:-120px 0 0 -120px} #load p{position:absolute;bottom:0;left:-25%;width:150%;white-space:nowrap;display:none;} #load .p266{ position:relative; top:-200px; display:block; width:146px; height:104px; margin:0 auto; border-radius:15px; } #load #percent{ position:relative; top:68px; font-size:26px; letter-spacing: 2px;; color:#fff; font-family:fantasy; -webkit-transition: all 1s; transition: all 1s; } .grab{position:absolute;top:-1000%;left:0;} .spinner { width: 60px; height: 60px; -webkit-animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate; animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate; position:absolute; top:50%; left:50%; margin:-30px 0 0 -30px; } @-webkit-keyframes rotate { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg); transform: perspective(120px) rotateX(-180deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } } @keyframes rotate { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg); transform: perspective(120px) rotateX(-180deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } } @-webkit-keyframes background { 0% { background-color: #e33935; } 50% { background-color: #30addd; } 100% { background-color: #66b851; } } @keyframes background { 0% { background-color: #e33935; } 50% { background-color: #30addd; } 100% { background-color: #66b851; } }