12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- 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;
- }
- }
|